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-виджета.