intermediate
Клавиатурная навигация
Обеспечьте доступ ко всем интерактивным сценариям, управление и выход с клавиатуры в логичном tab order.
Клавиатурная навигация — все интерактивные сценарии доступны без указателя: логичный tab order, видимый focus, Escape для закрытия и стрелки там, где их ждёт составной виджет. Tab order следует порядку чтения, кроме осознанного focus trap (модалки).
<button type="button" onclick="openMenu()">Menu</button>
<!-- Избегайте tabindex > 0; используйте порядок DOM или roving tabindex -->
| Клавиша | Ожидаемое поведение | |---------|---------------------| | Tab / Shift+Tab | Фокус между focusable-контролами | | Enter / Space | Активация кнопок и многих ссылок | | Escape | Закрытие dialog, menu, tooltip | | Стрелки | Движение в tabs, listbox, menu (если реализовано) |
Кастомные компоненты должны повторять контракт нативных — ARIA сам по себе не добавляет keyboard support.
На интервью: значения `tabindex`; roving tabindex в React listbox; skip links; почему положительный `tabindex` нежелателен.
Типовые ошибки: `outline: none` без замены; меню только на hover; trap без Escape; невидимые focusable элементы за экраном.
Компромисс — визуальный минимализм против обнаруживаемости для keyboard-only пользователей.
Чеклист:
- Без положительного `tabindex` на обычных страницах.
- Видимые focus styles на интерактиве.
- Escape закрывает overlay и возвращает focus.
- Паттерны стрелок соответствуют типу ARIA-виджета.