Доступность сайта: что сделать, чтобы им могли пользоваться все

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

Разберём, зачем доступность бизнесу, какие требования важнее всего и как проверить сайт.

Зачем бизнесу доступность сайта?

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

Доступность выгодна и тем, у кого нет инвалидности:

• человек с загипсованной рукой пользуется клавиатурой;
• на ярком солнце нужен высокий контраст;
• в шумном месте нужны субтитры к видео;
• пожилым пользователям нужен крупный текст и понятная навигация;
• поисковые и AI-роботы лучше понимают семантическую разметку.

Какие требования доступности самые важные?

Самые важные требования описаны в стандарте WCAG — Руководстве по доступности веб-контента; актуальная версия — WCAG 2.2, а ориентиром для большинства сайтов служит уровень AA. На практике большую часть проблем закрывают несколько базовых правил.

Требование	Что проверить	Типичная ошибка
Семантическая разметка	Заголовки по уровням, списки, кнопки и ссылки — настоящие элементы	Кнопка из div с обработчиком клика
Текстовые альтернативы	У содержательных изображений есть alt	Картинки с текстом без описания
Контраст	Обычный текст — не менее 4,5:1 к фону	Светло-серый текст на белом
Работа с клавиатуры	Всё доступно через Tab, фокус виден	Убранная обводка фокуса
Подписи к полям	У каждого поля формы есть связанная подпись	Только placeholder вместо подписи
Сообщения об ошибках	Ошибка описана текстом и связана с полем	Ошибка обозначена только красным цветом
Масштабирование	Сайт работает при увеличении до 200%	Текст обрезается или перекрывается

Полный список критериев — в спецификации WCAG 2.2 консорциума W3C.

Фото: Unsplash

Как писать доступную разметку?

Доступная разметка начинается с использования правильных HTML-элементов: кнопка — это button, ссылка — a, поле формы — input со связанной label. Встроенные элементы уже умеют работать с клавиатурой и экранными дикторами, а самодельные приходится доделывать вручную.

<!-- Плохо: не работает с клавиатуры, диктор не поймёт, что это кнопка -->
<div class="btn" onclick="submitForm()">Отправить</div>
<input placeholder="Телефон">

<!-- Хорошо: настоящая кнопка и поле с подписью и описанием ошибки -->
<label for="phone">Телефон</label>
<input id="phone" type="tel" autocomplete="tel" aria-describedby="phone-error" aria-invalid="true">
<p id="phone-error">Введите номер в формате +7 900 000-00-00</p>
<button type="submit">Отправить</button>

Правила для интерактивных компонентов

• модальное окно держит фокус внутри и возвращает его на кнопку при закрытии;
• выпадающие меню и вкладки управляются стрелками и Escape;
• ARIA-атрибуты дополняют разметку, а не заменяют правильные элементы;
• анимации отключаются, если пользователь выбрал уменьшение движения в системе.

Как проверить доступность сайта?

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

Порядок проверки:

1. Запустить автоматическую проверку — Lighthouse или axe — на ключевых шаблонах страниц.
2. Пройти основные сценарии только клавиатурой: меню, форма заявки, корзина, оплата.
3. Проверить страницы экранным диктором — VoiceOver на macOS и iOS или NVDA на Windows.
4. Увеличить масштаб до 200% и проверить, что ничего не обрезается.
5. Добавить автоматические проверки доступности в CI, чтобы новые ошибки не появлялись.

Доступность хорошо сочетается с другими проверками качества интерфейса, например скорости — об этом в статье Core Web Vitals.

Сколько стоит сделать сайт доступным?

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

Что снижает затраты:

• дизайн-система с проверенными доступными компонентами;
• проверка контраста на этапе макетов;
• автоматические проверки в CI с первого дня;
• обучение команды базовым правилам — они быстро становятся привычкой.

Коротко

• Доступный сайт работает с клавиатуры, с экранным диктором и при увеличении, а в ЕС это ещё и требование закона.
• Ориентир — WCAG 2.2 уровня AA: семантика, контраст, подписи, фокус, понятные ошибки.
• Используйте настоящие HTML-элементы; ARIA — дополнение, а не замена.
• Проверяйте автоматикой, клавиатурой и диктором, добавьте проверки в CI.
• Доступность, заложенная с начала, почти ничего не стоит; переделка готового сайта — дорого.