Доступность — это не отдельная версия «для слабовидящих», а свойство всего сайта. Контраст, размер шрифта, работа с клавиатуры и понятные подписи помогают всем — от пожилого закупщика до менеджера с телефоном на солнце.
Кому нужна доступность
Когда говорят о доступности сайтов, обычно представляют незрячего человека с программой экранного доступа. Это важная, но не единственная группа. Проблемы с восприятием интерфейса бывают постоянными (нарушения зрения, моторики, слуха, когнитивные особенности), временными (сломанная рука, расширенные после визита к окулисту зрачки) и ситуативными (яркое солнце на экране, телефон в одной руке, шумное помещение, медленный интернет в дороге).
Если сложить все эти группы, окажется, что доступный сайт нужен практически каждому посетителю в какой-то момент. В B2B это особенно заметно: решения о закупках часто принимают люди 45–60 лет, у многих из которых зрение уже не позволяет комфортно читать мелкий светло-серый текст, который так любят дизайнеры. Сайт, который им неудобно читать, проигрывает конкуренту ещё до сравнения цен.
Контраст: самая частая и самая простая проблема
Недостаточный контраст текста — нарушение номер один, которое мы находим при аудите. Международные рекомендации по доступности веб-контента задают понятные пороги: соотношение яркости текста и фона не менее 4,5:1 для обычного текста и 3:1 для крупного (от 24 пикселей или от 18,5 пикселя жирным). Эти же 3:1 применяются к значимым элементам интерфейса: границам полей ввода, иконкам-кнопкам, индикаторам состояния.
Чтобы почувствовать цифры: серый #777 на белом фоне даёт примерно 4,5:1 — это нижняя граница для основного текста. #999 — около 2,8:1, уже не проходит. А серый текст на светло-сером фоне карточки, популярный в «воздушных» дизайнах, часто опускается до 2:1 и ниже. Проверяется контраст за секунды — встроенными инструментами браузера или любым онлайн-калькулятором, и мы делаем это ещё на этапе утверждения палитры.
Где контраст чаще всего проваливается
- Подписи под изображениями, даты, мелкие пояснения — их часто делают бледными «чтобы не отвлекали».
- Текст-подсказка в полях формы.
- Белый текст на фотографиях без затемнения.
- Кнопки в фирменном светлом цвете с белой надписью.
- Неактивные элементы, которые на самом деле активны, но выглядят выключенными.
Размеры: текст, кнопки, области нажатия
Для основного текста на десктопе мы ориентируемся на 16–18 пикселей, на мобильных — не меньше 16. Межстрочный интервал — 1,4–1,6 от размера шрифта, длина строки — 60–80 знаков. Текст меньше 14 пикселей допустим только для вспомогательной информации, и то с хорошим контрастом.
Размер интерактивных элементов важен для людей с нарушениями моторики, для пожилых пользователей и для всех, кто пользуется телефоном на ходу. Рекомендуемая область нажатия — не меньше 44×44 пикселя, минимально допустимая — 24×24 с достаточным расстоянием до соседних элементов. Ссылки в плотных списках, крестики закрытия модальных окон, чекбоксы — именно по ним чаще всего промахиваются.
Сайт должен корректно работать при увеличении масштаба до 200% без горизонтальной прокрутки и обрезанного текста. Многие пользователи с ослабленным зрением не включают специальные программы, а просто увеличивают масштаб браузера — и видят наезжающие друг на друга блоки.
Клавиатура и фокус
Часть людей не может пользоваться мышью, а часть просто предпочитает клавиатуру — например, при заполнении длинных форм. Проверка простая: откройте сайт и попробуйте пройти ключевой сценарий только клавишей Tab, Enter и стрелками. Типичные проблемы, которые обнаруживаются за пять минут:
- Невидимый фокус. Дизайнеры часто убирают контур вокруг активного элемента, потому что он «некрасивый». В итоге человек, перемещающийся по сайту клавиатурой, не понимает, где находится. Решение — не убрать фокус, а оформить его в стиле сайта.
- Недоступные элементы. Выпадающие меню, открывающиеся только при наведении мыши; «кнопки», свёрстанные как обычные блоки без возможности активировать их клавиатурой.
- Ловушки фокуса. Модальное окно, из которого нельзя выйти клавишей Esc, или, наоборот, окно, при открытии которого фокус остаётся на странице под ним.
- Нелогичный порядок. Фокус прыгает из шапки в подвал, потом в середину страницы, потому что порядок элементов в коде не совпадает с визуальным.
Смысл, а не только внешний вид
Программы экранного доступа читают не то, что нарисовано, а то, что описано в коде. Поэтому для доступности важна семантическая вёрстка:
- заголовки размечены как заголовки и идут по порядку уровней, без пропусков;
- у каждого поля формы есть связанная подпись, а ошибки объявляются программно, а не только красным цветом;
- у смысловых изображений есть альтернативный текст, описывающий суть («Схема монтажа кронштейна на бетонную стену»), а декоративные изображения помечены как декоративные;
- ссылки понятны вне контекста: не «Подробнее» десять раз подряд, а «Подробнее о доставке»;
- таблицы размечены с заголовками строк и столбцов, а не собраны из блоков;
- язык страницы указан в коде, чтобы синтезатор речи читал текст с правильным произношением.
Приятный побочный эффект: семантическая вёрстка одновременно помогает поисковым системам понимать структуру страницы. Доступность и SEO-подготовка здесь работают в одном направлении.
Совет студии: не устанавливайте на сайт виджеты «версии для слабовидящих», которые обещают сделать сайт доступным одной строкой кода. Они не исправляют проблемы в разметке, часто мешают программам экранного доступа и создают ложное ощущение, что задача решена. Доступность закладывается в дизайн и вёрстку, а не накладывается сверху.
Во что обходится доступность
Если заложить доступность с самого начала проекта, она почти ничего не стоит: это набор правил для дизайнера и верстальщика, которые не увеличивают объём работ больше чем на 5–10%. Исправлять доступность у готового сайта дороже: приходится переделывать палитру, компоненты форм, меню, а иногда и структуру шаблонов.
| Задача | На новом проекте | На готовом сайте |
|---|---|---|
| Контрастная палитра | Входит в работу над цветом | Правка стилей и всех макетов, 2–5 дней |
| Видимый фокус и работа с клавиатуры | Часть описания компонентов | Доработка каждого интерактивного элемента, 1–2 недели |
| Семантическая разметка | Стандарт вёрстки | Переработка шаблонов, 1–3 недели |
| Альтернативные тексты | Часть наполнения | Ревизия всех изображений, зависит от объёма |
В одном проекте для производителя медицинских расходных материалов мы проводили аудит доступности уже работающего сайта. Из 60 проверенных пунктов 23 не выполнялись, включая невидимый фокус, формы без подписей и контраст основного текста 3,1:1. Исправление заняло около трёх недель. После этого не только выросло время на странице у посетителей старшего возраста, но и сократилось количество звонков с вопросом «не могу отправить заявку с сайта».
Чек-лист доступности: минимум для любого сайта
- Контраст основного текста не ниже 4,5:1, крупного и элементов интерфейса — не ниже 3:1.
- Основной текст — от 16 пикселей, межстрочный интервал — от 1,4.
- Области нажатия кнопок и ссылок — от 44×44 пикселя на мобильных.
- Сайт читается при увеличении до 200% без горизонтальной прокрутки.
- Все ключевые сценарии можно пройти только с клавиатуры.
- Фокус на элементах хорошо виден и оформлен в стиле сайта.
- Модальные окна закрываются по Esc, фокус возвращается на исходный элемент.
- Заголовки размечены по порядку уровней.
- У каждого поля формы есть подпись, ошибки описаны текстом.
- У смысловых изображений есть осмысленный альтернативный текст.
- Информация не передаётся только цветом.
- Анимации уважают системную настройку «уменьшить движение».
Доступность — это не благотворительность и не формальность. Это качество продукта: сайт, которым удобно пользоваться в любых условиях, приносит больше заявок от всех посетителей, а не только от тех, для кого эти правила изначально писались.
