Получить доступ

Доступность (a11y)

Основа с Junior

Интерфейс, которым могут пользоваться все — с клавиатуры, со скринридером, с плохим зрением.

Доступность — не отдельная функция, а качество разметки и дизайна. Требования собраны в стандарте WCAG; в ряде стран и компаний его соблюдение обязательно.

Что важно знать

  • Клавиатура: всё интерактивное достижимо по Tab, видимый фокус (:focus-visible), логичный порядок, Escape закрывает модальные окна.
  • Семантика прежде ARIA: родной <button> лучше, чем <div role="button" tabindex="0"> с обработчиками клавиш.
  • ARIA — для того, чего нет в HTML: aria-label, aria-expanded, aria-live для динамических сообщений. Неверная ARIA хуже, чем никакой.
  • Контраст текста не ниже 4,5:1, информация не передаётся только цветом.
  • Подписи к полям, понятные сообщения об ошибках, alt у картинок.
  • Уважать prefers-reduced-motion для анимаций.
  • Проверка: навигация только клавиатурой, Lighthouse и axe, скринридер (VoiceOver, NVDA).

Критерии освоения

Junior ≈ 4 ч

  • Делает интерфейс доступным с клавиатуры — видимый фокус, логичный порядок, Escape закрывает окно
  • Проверяет контраст и использует родные элементы вместо div с обработчиками

Практика. Пройти свой проект только с клавиатуры и исправить все места, где фокус теряется или не виден.

Middle ≈ 8 ч

  • Применяет ARIA для сложных виджетов (вкладки, combobox, модальные окна) по шаблонам WAI-ARIA
  • Проверяет интерфейс скринридером и инструментами axe или Lighthouse

Практика. Довести сложный виджет (модальное окно или автодополнение) до соответствия шаблону WAI-ARIA и проверить в NVDA или VoiceOver.

Senior ≈ 6 ч

  • Встраивает проверки доступности в CI и дизайн-систему и обучает команду

Практика. Добавить автоматические проверки axe в CI и тесты компонентов, провести для команды разбор типичных ошибок доступности.

Вопросы с собеседований

Документация

← Вся карта «Frontend-разработчик»

Закрытая бета

Знать тему — половина дела

На живом собеседовании sotto слышит вопрос интервьюера и показывает короткий ответ и план. Оставьте контакт — пришлём доступ и промокод.

  • Промокод на 2 часа — сверх пробных 30 минут
  • Программа для Windows — скачать сразу, войти — через Яндекс ID или VK ID
  • Прямая связь с разработчиком: что улучшить — сделаем