Доступность
Alt-текст, подписи, клавиатура и ARIA — ровно столько, сколько нужно.
Обновлено
Что такое доступность
Доступность (a11y — «a», 11 букв, «y») означает, что сайтом может пользоваться кто угодно:
- с клавиатуры (без мыши — многие продвинутые пользователи и люди с нарушениями моторики);
- со скринридером (программа читает страницу вслух — незрячие пользователи);
- с увеличением или при слабом зрении;
- с дальтонизмом, на экране под солнцем, с занятой рукой.
С 2025 года в ЕС это ещё и юридическое требование для многих сайтов (European Accessibility Act). Бонус: доступное проще тестировать автоматически, и оно лучше индексируется.
Как скринридер «видит» страницу
Он не видит пиксели — он читает дерево доступности, построенное из HTML. Для каждого элемента он знает:
| Свойство | Пример | Откуда берётся |
|---|---|---|
| роль | кнопка, ссылка, заголовок, список | тег (<button>) или role |
| имя | «Закрыть» | текст, alt, <label>, aria-label |
| состояние | нажата, раскрыт, отключена | disabled, aria-expanded, aria-pressed |
Поэтому семантический HTML — это 80% доступности: у <button>Сохранить</button> уже есть роль, имя и фокус.
6 правил, которые покрывают большинство случаев
- Семантический HTML —
button,a,nav,main,label. - Альтернативный текст —
<img alt="Описание">; декоративное изображение →alt=""(пустой, а не отсутствующий — иначе прочитается имя файла). - У каждого поля есть подпись —
<label for>или, если места нет,aria-label. - Всё работает с клавиатуры — Tab доходит до всего в логичном порядке; фокус виден (
:focus-visible). - Контраст — минимум 4.5:1 для обычного текста, 3:1 для крупного (WCAG AA).
- У кнопок-иконок есть имя —
<button aria-label="Закрыть">✕</button>.
ARIA — только когда HTML не хватает
ARIA = атрибуты, которые добавляют информацию для вспомогательных технологий. Первое правило ARIA: не используйте ARIA, если есть нативный элемент.
<!-- ✗ нужно добавить role, tabindex, обработчик Enter и Space... -->
<div role="button" tabindex="0" onclick="save()">Сохранить</div>
<!-- ✓ всё это бесплатно -->
<button type="button">Сохранить</button>Виды атрибутов ARIA:
| Вид | Атрибуты | Пример использования |
|---|---|---|
| имя / описание | aria-label, aria-labelledby, aria-describedby |
кнопка-иконка, сообщение об ошибке, связанное с полем |
| состояние | aria-expanded, aria-pressed, aria-current, aria-invalid |
открытое меню, переключатель, текущая страница, неверное поле |
| живые области | aria-live="polite" |
тосты, ошибки после отправки |
| скрытие | aria-hidden="true" |
декоративная иконка рядом с текстом |
Ссылка или кнопка?
<a href> |
<button> |
|
|---|---|---|
| Что делает | ведёт куда-то (меняет URL) | что-то делает (отправляет, открывает, удаляет) |
| Клавиатура | Enter | Enter и Space |
| Правый клик → новая вкладка | да | нет |
Как проверить за 5 минут
- Пользуйтесь страницей только через Tab / Shift+Tab / Enter / Space / Esc.
- Chrome DevTools → Lighthouse → Accessibility.
- Увеличение до 200% — вёрстка не должна ломаться.
- macOS: VoiceOver (Cmd+F5) на 2 минуты — очень показательно.
Коротко
- Скринридер читает роль + имя + состояние из HTML.
- Семантический HTML решает большинство проблем; ARIA только дополняет.
- Клавиатура, видимый фокус, контраст,
alt,label.