Этап 3 из 19 · ≈ 4 ч

Доступность (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 и тесты компонентов, провести для команды разбор типичных ошибок доступности.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

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

Смотреть все
Спроектируйте компонент поиска с автодополнением.Senior

Уточнить требования (источник данных, объём, задержка, мобильные, офлайн), затем: debounce ввода (~150–300 мс), отмена устаревших запросов (AbortController) и защита от гонок ответов, кэш результатов по запросу, минимальная длина запроса, клавиатурная…

Полный разбор
Что такое доступность веб-интерфейса и с чего её начинать?Junior

Доступность — возможность пользоваться интерфейсом людям с нарушениями зрения, слуха, моторики, когнитивными особенностями, а также всем в неудобных условиях (солнце, одна рука). Стандарт — WCAG (уровень AA — обычная цель). Основы: семантическая разметка…

Полный разбор
Как обеспечить работу интерфейса с клавиатуры и управление фокусом?Junior

Все действия должны быть доступны с клавиатуры: Tab — перемещение по интерактивным элементам, Enter и пробел — активация, Esc — закрыть окно, стрелки — внутри составных виджетов. Нативные button, a, input фокусируются сами; tabindex="0" добавляет элемент в…

Полный разбор
Что такое ARIA и когда её использовать?Middle

ARIA — атрибуты, которые сообщают вспомогательным технологиям роль (role="dialog"), состояние (aria-expanded, aria-selected) и связи (aria-labelledby, aria-describedby, aria-controls) там, где HTML не справляется — в сложных виджетах (вкладки, комбобокс…

Полный разбор
Что такое семантическая разметка HTML и зачем она нужна?Junior

Семантические теги описывают смысл содержимого: header, nav, main (один на странице), article, section, aside, footer, заголовки h1–h6 по иерархии, button для действий, a для переходов, ul/ol для списков, table для таблиц данных. Это нужно скринридерам…

Полный разбор
Зачем учитывать prefers-reduced-motion?Junior

У части людей движение на экране вызывает головокружение и тошноту (вестибулярные нарушения), других отвлекает. В системе они включают «уменьшить движение», а сайт узнаёт об этом через медиазапрос prefers-reduced-motion: reduce. В этом режиме убирают крупные…

Полный разбор
Как правильно сверстать форму?Junior

Каждое поле — с label (for/id или обёртка): клик по подписи фокусирует поле, скринридер читает подпись. Правильный type (email, tel, number, date, password) даёт нужную клавиатуру на телефоне и встроенную проверку; name — ключ при отправке; autocomplete…

Полный разбор

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

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

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования