Разработка

Доступность сайта: кому и зачем

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

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

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

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

  • Человек читает экран телефона на ярком солнце. Светло-серый текст на белом фоне перестаёт существовать.
  • У человека сломалась или разрядилась мышь, и он ходит по странице клавишей Tab.
  • Человек смотрит видео в шумном месте без наушников — и без субтитров не понимает ничего.
  • Человек держит ребёнка одной рукой и промахивается по маленьким кнопкам.
  • Человеку за пятьдесят, и он читает мелкий шрифт хуже, чем дизайнер, которому тридцать.
  • У человека медленный интернет, изображения не загрузились — и вместо товаров он видит пустые прямоугольники.
  • Человек пользуется программой чтения с экрана, потому что не видит.

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

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

Что это значит на практике

Контраст

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

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

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

И связанное правило: цвет не должен быть единственным носителем смысла. Если ошибка в форме обозначена только красной рамкой, часть людей её не увидит. Нужна ещё и надпись.

Управление с клавиатуры

Проверка занимает минуту: откройте свой сайт и попробуйте пройти его только клавишей Tab и Enter. Три вещи, которые ломаются чаще всего.

  1. Не видно, где фокус. Разработчик убрал «некрасивую» рамку вокруг активного элемента и не заменил её ничем. В результате человек нажимает Tab и не понимает, куда попал.
  2. Есть ловушки. Открылось всплывающее окно, а выйти из него клавиатурой нельзя. Или фокус проваливается в виджет и не возвращается.
  3. Нельзя нажать. Кнопка сделана обычным блоком с обработчиком клика, и клавиатура на неё не встаёт вовсе.

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

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

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

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

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

Альтернативный текст

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

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

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

Структура и понятный текст

Заголовки должны быть заголовками, а не крупным жирным текстом. Уровни идут по порядку — по ним ориентируются и программы чтения, и поисковые системы, и просто люди, которые сканируют страницу глазами.

Ссылки должны быть понятны вне контекста. Десять ссылок «подробнее» подряд не говорят ни о чём; «условия доставки» говорит. Это же правило облегчает жизнь всем, кто просматривает страницу по диагонали.

Почему дешевле заложить сразу

Разница не в объёме работы, а в том, что именно приходится переделывать.

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

На этапе вёрстки использовать правильные элементы для кнопок и полей — тоже ноль затрат, это просто корректный способ. После запуска это переписывание интерфейса и повторная проверка всех сценариев.

Заложить подписи в форму при проектировании — минута. Переделать форму, на которую уже настроена аналитика и интеграция с CRM, — отдельная задача с регрессией.

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

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

Что проверить сегодня

  1. Пройдите сайт клавишей Tab: виден ли фокус, доступны ли все кнопки, можно ли выйти из всплывающих окон.
  2. Откройте главную на телефоне на улице в солнечный день.
  3. Прогоните основные цвета через любой калькулятор контраста и сверьтесь с порогами WCAG.
  4. Проверьте, есть ли у полей формы постоянные подписи и понятные сообщения об ошибках.
  5. Найдите изображения, несущие смысл, и убедитесь, что у них есть описание.
  6. Проверьте, нет ли важной информации, существующей только в виде картинки.
  7. Посмотрите, идут ли заголовки по уровням и не заменены ли они крупным жирным текстом.
  8. Увеличьте масштаб страницы в браузере и убедитесь, что вёрстка не рассыпается.

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