Доступность интерфейса
Почему семантический HTML важен в React-компонентах?
Семантический элемент сразу сообщает браузеру и assistive technology роль, состояние и способ взаимодействия. Настоящий <button> получает фокус, активируется клавишами Enter и Space и имеет ожидаемую семантику без ручной эмуляции. Заголовки и landmarks создают навигационную структуру, связанный <label> даёт полю доступное имя. div role=button требует вручную реализовать tabIndex, клавиатуру, disabled-состояние и фокус, где легко ошибиться. ARIA добавляют только когда подходящего HTML-элемента нет; она не меняет поведение и не исправляет неверную клавиатурную модель автоматически.
Ссылки для изучения
Примеры хороших ответов из реальных собеседований
- Собеседование на Junior Frontend разработчика на React · 4:27–6:23Мок-собеседование · Совместный разбор
На примерах nav и button участники объясняют пользу семантики для скринридера и почему у div приходится отдельно воспроизводить клавиатурную доступность и роль кнопки.
Как обеспечить управление интерфейсом только с клавиатуры?
Используют нативные ссылки, кнопки и поля в естественном DOM-порядке, не создавая положительный tabIndex. Каждый интерактивный элемент должен иметь видимый focus и доступное имя, а пользователь должен выполнить все действия клавиатурой. Кастомный контрол реализует ожидаемые клавиши, включая Enter, Space и стрелки по своему паттерну. Модальное окно переносит фокус внутрь, удерживает его на время открытия, закрывается Escape и возвращает фокус инициатору. Проверяют отсутствие keyboard trap и доступ к skip link. Наведение мыши не должно быть единственным способом раскрыть функцию.
Ссылки для изучения
Примеры хороших ответов из реальных собеседований
- Собеседование на Junior Frontend разработчика на React · 4:27–6:23Мок-собеседование · Совместный разбор
На примерах nav и button участники объясняют пользу семантики для скринридера и почему у div приходится отдельно воспроизводить клавиатурную доступность и роль кнопки.
