Доступность, или accessibility, - это способность сайта работать для людей с разными возможностями. Кто-то пользуется программой чтения с экрана, кто-то не различает цвета, кто-то не может пользоваться мышью и перемещается только клавиатурой. Хорошо сделанный сайт остаётся полезным для всех этих людей.
Есть и практический аргумент помимо этического. Многие требования доступности напрямую совпадают с требованиями поисковых систем: понятная структура заголовков, текстовые описания изображений, осмысленные подписи ссылок. Улучшая доступность, вы одновременно улучшаете SEO.
Базовые вещи, которые дают больше всего эффекта
- Достаточный контраст текста и фона, особенно для серых надписей
- Возможность пройти весь сайт клавишей Tab и видеть, где сейчас фокус
- Альтернативные описания у всех содержательных изображений
- Подписи у полей формы, а не только подсказка внутри поля
- Понятные тексты ссылок вместо фразы про переход по ссылке
- Правильная иерархия заголовков от h1 к h2 и h3 без пропусков
Отдельного внимания заслуживает размер шрифта. Мелкий светло-серый текст выглядит модно на макете дизайнера, но становится нечитаемым для человека старше пятидесяти или при ярком солнце на улице. Основной текст на сайте разумно держать не меньше шестнадцати пикселей.
Формы и сообщения об ошибках
Формы - самое частое место, где доступность ломается. Если единственный признак ошибки - красная рамка вокруг поля, человек с нарушением цветовосприятия её не заметит. Всегда добавляйте текстовое пояснение рядом с полем, где сказано, что именно не так и как это исправить.
Подсказка внутри поля не заменяет подпись: когда пользователь начинает вводить текст, она исчезает, и человек забывает, что от него хотели. Постоянная подпись сверху решает эту проблему и заодно помогает программам чтения с экрана правильно озвучить форму.
Как проверить свой сайт
Начните с двух бесплатных проверок. Первая: откройте сайт и попробуйте выполнить целевое действие, например отправить заявку, пользуясь только клавиатурой. Если вы где-то застряли или потеряли из виду точку фокуса, это ошибка. Вторая: запустите встроенный в браузер аудит Lighthouse и посмотрите раздел про доступность.
Автоматические инструменты находят примерно треть проблем: контраст, отсутствующие описания картинок, неправильные атрибуты. Остальное выявляется только ручной проверкой и здравым смыслом, поэтому не стоит воспринимать зелёную оценку как гарантию.
Требования к доступности постепенно ужесточаются на уровне Европейского союза, и для части компаний они уже становятся обязательными. Даже если ваш бизнес пока под них не подпадает, разумно закладывать базовые принципы при разработке сразу: переделывать готовый сайт всегда дороже, чем сделать правильно с самого начала.