Модуль 6 · Урок 22
Keyboard navigation і focus
Keyboard pass перевіряє не «чи є tabindex», а чи можна знайти, зрозуміти й активувати кожну дію у змістовному порядку. Native controls дають очікувану поведінку; CSS має показувати focus у кожній темі, а layout — не перекривати його.
Очікувана native keyboard behavior
| Control | Navigation | Activation |
|---|---|---|
| Link | Tab / Shift+Tab | Enter |
| Button | Tab / Shift+Tab | Enter або Space |
| Radio group | Tab у group, arrows між options | Native selection |
| Text input | Tab / Shift+Tab | Typing/editing keys |
Не додавайте кожному static element tabindex="0": це засмічує sequence. Якщо елемент має бути дією, почніть із правильного native control.
Logical focus order
<a class="skip-link" href="#main">До основного вмісту</a>
...
<main id="main">...</main>Focus order має зберігати зміст і operability. Positive tabindex створює окремий ручний порядок, який легко розходиться з DOM. tabindex="0" додає елемент у natural order; -1 дозволяє programmatic focus, але прибирає зі звичайної Tab-послідовності. Жодне значення не надає element role або activation behavior.
Visible, not trapped, not obscured
:focus-visible { outline:3px solid #f59e0b; outline-offset:4px; }
@media (forced-colors:active) {
:focus-visible { outline-color:Highlight; }
}Не вимикайте outline без рівноцінної заміни. Перевірте focus на світлих і темних surfaces, у forced colors, після zoom і біля sticky header/footer. Користувач має залишити component звичайними клавішами; modal, який утримує focus, потребує повного pattern і не входить до цього уроку.
Відтворюваний keyboard pass
- Почніть із address bar, не натискайте mouse.
- Для кожного Tab/Shift+Tab запишіть expected і actual target.
- Активуйте link Enter, button Enter/Space, radio arrows.
- Перевірте відсутність пропусків, traps, невидимого та перекритого focus.
- Повторіть light, dark, 200% text і narrow viewport.
Evidence
Заповнений keyboard-focus-matrix має містити step, key, target, action, visible focus, trap/obscured result і retest.
Офіційні джерела
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.