Модуль 11 · Урок 41
Semantics, keyboard і focus
Accessible UI передає не лише pixels: assistive technology потребує programmatic role, accessible name, state, value, relationships та predictable focus. Manual task flow перевіряє реальну operability, а не лише scanner score.
Programmatic contract control
Visual button має бути control із correct role, meaningful name, current state/value і keyboard/touch behavior. Native semantic elements мають built-in behavior; custom widgets потребують повної pattern implementation. Placeholder або icon alone не завжди є достатньою label.
| Property | QA oracle |
|---|---|
| Role | Тип control відповідає interaction: button, link, checkbox, heading тощо. |
| Name | Коротко й однозначно описує purpose у context; visible label узгоджений. |
| State/value | Checked, expanded, selected, disabled, current та value оновлюються. |
| Relationship | Label, description, error, group, dialog і ownership programmatically exposed. |
Keyboard path
Виконайте main task тільки клавіатурою: Tab/Shift+Tab, Enter/Space, arrows/Escape за widget pattern. Перевірте logical focus order, visible indicator, no trap, skip mechanism, not-obscured focus, operability та відсутність context change лише від focus.
`tabindex` не ремонтує semantics
Positive tabindex часто створює штучний порядок, що розходиться з DOM/reading order. `div role=button` без keyboard/state/focus behavior лишається неповним control.
Dialogs і dynamic changes
При open dialog focus переходить у meaningful location, background не стає випадково operable, Escape/close працюють за contract, після close focus повертається до trigger/логічного successor. Validation error має бути perceivable, associated with field, actionable; focus не крадуть без потреби.
Screen-reader task, не «потицяти свайпом»
На supported AT/browser/OS виконайте головні tasks: heading/landmark navigation, control announcement, forms/errors, modal, status update. Запишіть exact AT/OS/browser/build і gestures/keys. TalkBack/VoiceOver результати не переносяться автоматично між platforms.
Практика
Заповніть `semantic-control-audit.csv`, `keyboard-focus-log.csv` і `screen-reader-checklist.csv` для search, form/error та confirmation flow BookFlow.
Офіційні джерела
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.