Доступность сайта: базовые проверки за час
Десять базовых проверок доступности сайта: контраст по WCAG, клавиатура и фокус, описания изображений, подписи полей, заголовки, увеличение, тексты ссылок, язык страницы, движение и видео — с инструментами и итоговой таблицей.
Базовая проверка доступности сайта занимает около часа и находит самые частые проблемы: бледный текст, который трудно прочитать, элементы, до которых не добраться с клавиатуры, картинки без описания, поля форм без подписей. Исправлять их полезно не только ради людей с нарушениями зрения или моторики: тот же контраст выручает на телефоне под солнцем, а понятные подписи полей — всех, кто заполняет форму на ходу.
Статья для разработчиков и дизайнеров. Ниже — десять проверок с тем, как их провести, инструменты и итоговая таблица.
Десять проверок
1. Контраст текста
Обычный текст должен иметь контраст с фоном не меньше 4,5:1, крупный — не меньше 3:1. Крупным считается текст от 18 пунктов или от 14 пунктов полужирным. Это требование критерия 1.4.3 стандарта WCAG (W3C). Пороги не округляются: 4,49:1 — уже не проходит.
Как проверить: инструменты разработчика в браузере показывают контраст при выборе элемента. Чаще всего проваливаются серый текст на белом, подписи под полями и текст поверх фото.
2. Клавиатура
Пройдите страницу клавишей Tab. До каждой ссылки, кнопки и поля можно добраться, порядок логичный, а из меню и всплывающих окон можно выйти, не застряв.
3. Видимый фокус
При переходе клавиатурой видно, какой элемент сейчас выбран. Частая ошибка — убрать рамку фокуса ради красоты и ничего не дать взамен.
4. Описания изображений
Содержательные картинки имеют альтернативный текст, который описывает смысл, а декоративные — пустой alt="", чтобы программа экранного доступа их пропускала.
5. Подписи полей форм
У каждого поля есть видимая подпись, а не только подсказка внутри поля, которая исчезает при вводе. Сообщение об ошибке говорит, что исправить, и не передаётся только цветом.
6. Заголовки
На странице один главный заголовок, а разделы оформлены заголовками второго и третьего уровня по порядку. Заголовки не выбирают по размеру шрифта: размер задаётся стилями.
7. Увеличение
Увеличьте страницу в браузере до 200%. Текст не обрезается, не наезжает друг на друга, не появляется горизонтальная прокрутка там, где её не было.
8. Тексты ссылок
Ссылка понятна без окружающего текста. Десять ссылок «подробнее» на одной странице бесполезны тому, кто просматривает список ссылок.
9. Язык страницы
У страницы указан язык, например lang="ru", а у фрагментов на другом языке — свой. Так программы чтения произносят текст правильно.
10. Движение и видео
Анимации учитывают системную настройку уменьшения движения, автоматическая прокрутка слайдера останавливается, у видео с речью есть субтитры.
Инструменты
- Инструменты разработчика в браузере: контраст, дерево доступности.
- Лабораторный отчёт Lighthouse, который показывает и PageSpeed Insights: в нём есть отдельная категория доступности (документация PageSpeed Insights).
- Клавиатура и программа экранного доступа, встроенная в операционную систему, — ничто не заменит пять минут реального использования.
Автоматические проверки находят только часть проблем. Порядок фокуса, понятность текстов ссылок и подписей проверяет человек.
Итоговая таблица
| Проверка | Как | Норма |
|---|---|---|
| Контраст | Инструменты разработчика | Не меньше 4,5:1, крупный текст — 3:1 |
| Клавиатура | Пройти страницу клавишей Tab | Всё доступно, порядок логичный, нет ловушек |
| Фокус | Пройти страницу клавишей Tab | Выбранный элемент всегда виден |
| Изображения | Просмотреть alt | Смысловые описаны, декоративные с пустым alt |
| Формы | Заполнить форму с ошибкой | Видимые подписи, понятные сообщения не только цветом |
| Заголовки | Посмотреть структуру | Один главный, дальше по порядку |
| Увеличение | Масштаб 200% | Ничего не обрезается и не наезжает |
| Ссылки | Прочитать тексты ссылок | Понятны без контекста |
| Язык | Код страницы | Указан атрибут lang |
| Движение | Системная настройка и видео | Анимации уменьшаются, есть субтитры |
С чего начать
Начните с шаблонов, а не со страниц: исправленный контраст в стилях кнопки или подпись поля в компоненте формы исправляет проблему сразу на всём сайте. Потом — главная, страницы услуг и форма заявки: на них приходит больше всего людей.
В разработке сайтов PIP перед запуском проверяются страницы, формы и мобильная версия — см. страницу разработки сайтов. Хотите проверить доступность своего сайта? Расскажите о задаче.
Короткие подсказки о сайтах и автоматизации — в Telegram-канале @pip_kz.