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

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

Кому это нужно на самом деле

Ограничения бывают постоянными, временными и ситуативными — и последних больше всего.

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

Каждое улучшение доступности помогает всем троим: тому, у кого ограничение постоянно, тому, у кого временно, и тому, кто просто оказался в неудобных условиях. А последняя категория — это большая часть мобильного трафика.

Что даёт наибольший эффект

По убыванию отдачи.

Контрастность текста

Самая частая проблема современных сайтов. Светло-серый текст на белом выглядит стильно на макете и не читается на телефоне на улице.

Норма: контраст обычного текста к фону не ниже 4,5:1, крупного — не ниже 3:1. Проверяется бесплатными онлайн-инструментами по кодам цветов за минуту.

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

Размер областей нажатия

Кнопка или ссылка должна иметь область нажатия не меньше 24×24 пикселей, а на практике лучше 44×44. Мелкие иконки, ссылки в тексте вплотную друг к другу, крестик закрытия в углу — типичные места промахов.

Работа с клавиатуры

Пройдите по своему сайту одной клавишей Tab. Проверьте: видно ли, где вы находитесь; можно ли добраться до всех ссылок и полей; можно ли закрыть всплывающее окно; не проваливается ли фокус в скрытое меню.

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

Подписи к полям

Поле формы должно иметь подпись, а не только подсказку внутри. Подсказка исчезает при вводе, и человек, отвлёкшийся на середине, уже не знает, что он заполняет.

Описания изображений

Осмысленные для содержательных изображений и пустые для декоративных. Атрибут alt со значением «изображение» или именем файла хуже, чем его отсутствие.

Уважение к настройкам пользователя

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

Что не работает

Отдельная «версия для слабовидящих». Обычно это упрощённая страница с крупным шрифтом, которая содержит меньше информации и обновляется реже основной. Люди, которым она адресована, пользуются собственными инструментами — экранными читалками и системным увеличением — и им нужен доступный основной сайт, а не отдельный.

Виджет-накладка, обещающая «сделать сайт доступным». Панель с кнопками увеличения шрифта и смены цветов не чинит разметку, не добавляет подписи к полям и не улучшает работу с клавиатуры. Она создаёт видимость решения.

Как проверить свой сайт

1. Автоматическая проверка. Встроенная в браузер вкладка Lighthouse даёт раздел о доступности за минуту. Находит примерно треть проблем — это много для нулевых усилий.
2. Клавиатура. Пройдите весь сайт клавишей Tab, попробуйте отправить форму, не касаясь мыши.
3. Увеличение. Поставьте масштаб 200% и посмотрите, не разъезжается ли вёрстка и не пропадает ли содержимое.
4. Телефон на улице. Самая честная проверка контраста. Выйдите на солнце и попробуйте прочитать подписи под кнопками.

Про требования

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

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