---
title: Доступность интерфейса
questionDates:
  q-transfer-0445: '2026-10-01'
  q-transfer-0446: '2026-10-01'
seo:
  description: >-
    Тема «Доступность интерфейса» для собеседования React Developer. Почему
    семантический HTML важен в React-компонентах? Как обеспечить управление
    интерфейсом только с клавиатуры?
  title: Доступность интерфейса — React Developer
---

[Все темы React Developer](/prep/react-developer)

## Почему семантический HTML важен в React-компонентах? [#q-transfer-0445]

Семантический элемент сразу сообщает браузеру и assistive technology роль, состояние и способ взаимодействия. Настоящий `<button>` получает фокус, активируется клавишами Enter и Space и имеет ожидаемую семантику без ручной эмуляции. Заголовки и landmarks создают навигационную структуру, связанный `<label>` даёт полю доступное имя. `div role=button` требует вручную реализовать `tabIndex`, клавиатуру, disabled-состояние и фокус, где легко ошибиться. ARIA добавляют только когда подходящего HTML-элемента нет; она не меняет поведение и не исправляет неверную клавиатурную модель автоматически.

:::note[Ссылки для изучения]

1. [Доступный HTML: нативные элементы, клавиатура и семантика](https://doka.guide/a11y/a11y-html/)
   :::

---

## Как обеспечить управление интерфейсом только с клавиатуры? [#q-transfer-0446]

Используют нативные ссылки, кнопки и поля в естественном DOM-порядке, не создавая положительный `tabIndex`. Каждый интерактивный элемент должен иметь видимый focus и доступное имя, а пользователь должен выполнить все действия клавиатурой. Кастомный контрол реализует ожидаемые клавиши, включая Enter, Space и стрелки по своему паттерну. Модальное окно переносит фокус внутрь, удерживает его на время открытия, закрывается Escape и возвращает фокус инициатору. Проверяют отсутствие keyboard trap и доступ к skip link. Наведение мыши не должно быть единственным способом раскрыть функцию.

:::note[Ссылки для изучения]

1. [Доступный HTML: нативные элементы, клавиатура и семантика](https://doka.guide/a11y/a11y-html/)
   :::
