Что такое веб-доступность (a11y)?

Вопрос

Что такое доступность (accessibility, a11y) веб-страниц и как её обеспечить?

Короткий ответ

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

Подробный ответ

Ключевые практики:

• Семантическая разметка как основа — скринридеры и вспомогательные технологии полагаются на неё.
• alt у изображений — описывает содержимое картинки для незрячих пользователей; для декоративных изображений используется alt="".
• Управление фокусом — все интерактивные элементы должны быть доступны через Tab, а видимый :focus-стиль нельзя убирать без замены.
• ARIA-атрибуты (aria-label, aria-hidden, role) дополняют семантику там, где нативных тегов недостаточно, но не заменяют её — правило "no ARIA is better than bad ARIA".
• Контраст текста — минимум 4.5:1 для обычного текста по WCAG AA.
• Формы: у каждого <input> должен быть связанный <label>.

Пример

<!-- Плохо: div вместо кнопки, недоступно с клавиатуры -->
<div onclick="submit()">Отправить</div>

<!-- Хорошо -->
<button type="submit">Отправить</button>

<img src="chart.png" alt="Рост выручки на 20% за квартал" />
<img src="decor.png" alt="" />

Дополнительные вопросы

• Что такое WCAG и какие уровни соответствия существуют?
• Когда действительно нужны ARIA-атрибуты?
• Как протестировать сайт на доступность?