Что такое доступность (accessibility) в веб-разработке

Что проверяют

Знаете ли вы доступность как набор конкретных требований, а не как «добавить alt к картинкам». Интервьюер хочет понять, делали ли вы интерфейсы, которыми можно пользоваться с клавиатуры и скринридера. Следом обычно просят сделать доступной модалку или кастомный выпадающий список.

Как отвечать

Доступность это возможность пользоваться сайтом людям с нарушениями зрения, слуха, моторики и когнитивных функций, а заодно всем в неудобных условиях, например без мыши. Основной стандарт WCAG 2.2, уровни A, AA и AAA, в работе ориентируются на AA. В ЕС с июня 2025 года действует European Accessibility Act, в России для госсайтов есть ГОСТ Р 52872-2019.

Каркас ответа:

• семантика: <button> для действий, <a href> для переходов, <label> у каждого поля, иерархия заголовков, области <main> и <nav>. Нативный элемент бесплатно даёт фокус, роль и управление с клавиатуры;
• ARIA: только там, где нативного элемента нет: aria-expanded, aria-controls, aria-live для динамических сообщений;
• клавиатура и фокус: всё доступно с Tab, видимый фокус через :focus-visible, в модалке фокус заперт внутри и возвращается на кнопку после закрытия, в SPA фокус переносится при смене маршрута;
• контраст и размеры: 4.5:1 для обычного текста, 3:1 для крупного и для элементов управления, цель нажатия не меньше 24×24 CSS-пикселя по WCAG 2.2;
• медиа и движение: alt по смыслу, пустой alt="" у декоративных картинок, субтитры к видео, prefers-reduced-motion для анимаций.

Инструменты: axe DevTools, Lighthouse, eslint-plugin-jsx-a11y, @axe-core/playwright в e2e. Но автоматика ловит только формальные ошибки, поэтому обязательна ручная проверка клавиатурой и скринридером: NVDA, VoiceOver, TalkBack.

Где спотыкаются

Делают кнопку из <div onClick>. На неё нельзя попасть табом, она не срабатывает по Enter и Space, а скринридер не называет её кнопкой.

Навешивают ARIA поверх неправильной разметки. role="button" не добавляет поведения, это только обещание, которое потом никто не выполняет.

Убирают outline у фокуса ради дизайна и ничего не дают взамен. Пользователь клавиатуры перестаёт видеть, где находится.