Перейти к основному содержимому

Доступность

Доступность (a11y) — это не только забота о пользователях с ограниченными возможностями, но и показатель качества кода и интерфейса.

Цели​

  • Делать интерфейс доступным для пользователей с клавиатурой, скринридерами, слабым зрением и др.
  • Избежать регрессий: правила должны быть проверяемыми (eslint, тесты, Storybook checks).
  • Сократить "a11y-долг" за счёт стандартных паттернов для форм, модалок, меню и таблиц.

Обязательные принципы​

MUST​

  1. Доступность — обязательный аспект интерфейса
    • Интерфейс должен быть доступен при разных способах взаимодействия
  2. Способы взаимодействия:
    • Навигация с клавиатуры без использования мыши
    • Скринридеры и другие ассистивные технологии
    • Альтернативные устройства ввода (switch-контроллеры, eye-tracking)
  3. Каждый интерактивный элемент должен корректно передавать:
    • Роль — что это за элемент (кнопка, ссылка, поле ввода)
    • Имя — идентификация для ассистивных технологий
    • Состояние — disabled/expanded/selected/error и т.д.
  4. Семантический HTML по умолчанию
    • Нативные HTML-элементы всегда в приоритете (button, a, label, input, nav, main, header, footer)
    • Нативные элементы обеспечивают фокус, клавиатурное управление и поддержку скринридеров без дополнительного кода
  5. Любой интерактивный элемент доступен с клавиатуры (Tab/Shift+Tab, Enter/Space)
  6. Фокус видимый (не отключаем outline без замены)

SHOULD​

  • Минимизировать ARIA: сначала семантика, затем ARIA
  • Делать дизайн устойчивым к пользовательским настройкам браузера и масштабированию интерфейса

Разделы документации​