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

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

О ком речь

Не только о незрячих людях, как обычно думают.

Слабое зрение. Люди, которые увеличивают текст или пользуются экранной лупой. Сюда же попадают все, кому за сорок.

Дальтонизм. Заметная доля мужчин в той или иной степени. Если состояние поля показано только красной рамкой, часть людей её не различит.

Нарушения моторики. Люди, которым трудно попасть в маленькую кнопку.

Пользователи клавиатуры. Кто-то не может пользоваться мышью, кто-то просто привык работать с клавиатуры.

Ситуативные ограничения. Яркое солнце на экране, шум вокруг, одна рука занята, медленный интернет. Это временно, но касается всех.

Последний пункт объясняет, почему доступность выгодна: вы улучшаете сайт не для меньшинства, а для всех в неудобных обстоятельствах.

Базовые требования

Список, который закрывает большинство случаев.

Контраст

Текст должен читаться. Светло-серый на белом выглядит воздушно в макете и не читается на солнце или на дешёвом экране.

Проверяется автоматически — есть бесплатные инструменты, показывающие коэффициент контраста. Это самая частая и самая простая в исправлении проблема.

Не только цвет

Если состояние передаётся исключительно цветом — ошибка в форме красной рамкой, статус заказа зелёной точкой, — часть людей его не увидит.

Решение: цвет плюс что-то ещё — значок, подпись, изменение формы.

Масштабируемый текст

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

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

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

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

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

У каждого поля формы должна быть подпись, связанная с ним. Не просто текст-подсказка внутри поля: он исчезает при вводе, и человек забывает, что он заполняет.

Альтернативный текст к изображениям

Осмысленное описание там, где изображение несёт информацию. Для декоративных — пустое значение, чтобы программа чтения их не озвучивала.

Побочная выгода: это же учитывают поисковые системы.

Структура заголовков

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

Здесь доступность и SEO совпадают полностью: об этом же речь в статье технический SEO-аудит.

Осмысленные тексты ссылок

«Подробнее» вне контекста ничего не значит. Ссылка должна быть понятна сама по себе — это же требование к внутренней перелинковке, о чём в статье внутренняя перелинковка.

Про «версию для слабовидящих»

Отдельная чёрно-жёлтая версия сайта — устаревший подход.

Проблемы: её нужно поддерживать параллельно с основной, она почти всегда отстаёт по содержанию, и она сигнализирует «вот сюда идите, а основной сайт не для вас».

Современный подход — сделать основной сайт достаточно доступным. Тогда отдельная версия не нужна: человек сам увеличит текст или включит нужный режим в своём устройстве.

Исключение — если для вашей организации это обязательное требование. Тогда его выполняют, но основной сайт всё равно стоит привести в порядок.

Сколько это стоит

При разработке — почти ничего. Это вопрос аккуратности: проверить контраст, не убирать индикатор фокуса, подписать поля, задать альтернативный текст. Часы, а не недели.

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

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

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

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

1. Пройдите по сайту клавишей табуляции. Видно ли фокус? Доступны ли все кнопки?
2. Увеличьте масштаб до 200%. Всё читается? Ничего не наехало друг на друга?
3. Посмотрите на сайт в яркий день на телефоне. Текст читается?
4. Прогоните страницу через автоматический аудит доступности — такие инструменты встроены в браузеры.

Автоматика находит примерно половину проблем, остальное — ручная проверка. Но для начала половины достаточно.

Итог

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

Закладывать дешевле, чем дорабатывать. И значительная часть требований совпадает с тем, что и так нужно для поиска — так что усилие окупается дважды.