Как обеспечить работу интерфейса с клавиатуры и управление фокусом?
- Зачем нельзя убирать outline?
- Что такое tabindex?
Все действия должны быть доступны с клавиатуры: Tab — перемещение по интерактивным элементам, Enter и пробел — активация, Esc — закрыть окно, стрелки — внутри составных виджетов. Нативные button, a, input фокусируются сами; tabindex="0" добавляет элемент в порядок обхода, -1 — фокус только программно, положительные значения — не использовать. Видимый фокус обязателен: убрали outline — дайте свой стиль (:focus-visible). В модальном окне фокус переносят внутрь, удерживают там и возвращают на кнопку после закрытия.
- Порядок фокуса = порядок в DOM, а не визуальный
- Ссылка «Перейти к содержимому» в начале страницы
- После перехода по маршруту в SPA — переносить фокус на заголовок
Подробно
Проверка: отложить мышь и пройти основной сценарий. Если фокус пропадает, прыгает или застревает — это ошибка доступности.
Что хотят услышать
- Нативные элементы и клавиши.
- tabindex 0 и -1.
- Видимый фокус и фокус в модальных окнах.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✗Порядок фокуса задают положительными tabindex, а outline: none убирают ради аккуратного вида
- ✓Всё доступно с клавиатуры, фокус виден, модалка переносит, удерживает и возвращает фокус
- ✗Модальное окно не должно получать фокус, его закрывают только мышью
- ✗outline: none без замены — хорошая практика, фокус и так понятен по курсору
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.