Доступность (a11y) и ARIA
↑ 1.2 HTML · ← Предыдущая · → Следующая
Зачем это на собесе
Доступность — требование закона и признак зрелого фронтендера. Спрашивают про первое правило ARIA и управление фокусом.
Объяснение
Цель a11y: интерфейс должен быть пригоден для людей с нарушениями зрения, слуха, моторики и когнитивными особенностями (WCAG 2.2, уровни A/AA/AAA).
Основа доступности:
| Область | Практика |
|---|---|
| Семантика | правильные теги, landmarks, заголовки |
| Клавиатура | все действия доступны с клавиатуры; логичный порядок Tab; видимый :focus-visible |
| Альтернативы | alt, подписи к видео, транскрипты |
| Контраст | текст 4.5:1 (крупный 3:1), не передавать смысл только цветом |
| Формы | связанные label, сообщения об ошибках, aria-describedby |
| Динамика | оповещения aria-live, управление фокусом в модалках |
| Масштаб | вёрстка в rem, поддержка увеличения до 200% |
| Движение | уважать prefers-reduced-motion |
ARIA добавляет семантику там, где нативных средств нет: role, aria-label, aria-labelledby, aria-expanded, aria-controls, aria-hidden, aria-live.
Первое правило ARIA: если можно использовать нативный элемент — используйте его, а не div + ARIA.
<button aria-expanded="false" aria-controls="menu" id="btn">Меню</button>
<ul id="menu" hidden>...</ul>
<div role="alert" aria-live="assertive">Не удалось сохранить</div>
<dialog id="dlg" aria-labelledby="dlg-title"><h2 id="dlg-title">Подтверждение</h2></dialog>Модальные окна: фокус переходит в диалог, остаётся внутри (focus trap), Esc закрывает, после закрытия фокус возвращается. Нативный <dialog> и inert упрощают это.
Инструменты: Lighthouse, axe DevTools, eslint-plugin-vuejs-accessibility, проверка с VoiceOver/NVDA.
Нюансы и подводные камни
- «Плохой ARIA хуже отсутствия ARIA»: неверная роль вводит в заблуждение.
aria-hiddenна фокусируемом элементе — «призрачный» фокус.outline: noneбез замены лишает клавиатурных пользователей ориентира.- Placeholder не заменяет
label. - Автоматические проверки находят лишь часть проблем — нужна ручная проверка.
Практика
- Пройдите страницу только клавиатурой и исправьте ловушки фокуса.
- Прогоните axe и исправьте 5 замечаний.
- Сделайте доступное выпадающее меню и модалку.
Вопросы с ответами
Что такое первое правило ARIA?
Не использовать ARIA, если нативный HTML-элемент решает задачу.
Как сделать модалку доступной?
Перенос фокуса в неё, ловушка фокуса, закрытие по Esc, возврат фокуса и корректные роли/подписи.
Зачем
aria-live?Чтобы скринридер озвучивал динамически меняющееся содержимое.