Доступность сайта — это про то, может ли им воспользоваться человек, который видит хуже среднего, читает с экрана голосом или не пользуется мышью. Тема звучит узкоспециально, но на деле касается почти каждого проекта: среди посетителей любого сайта регулярно оказываются люди с плохим зрением, дальтонизмом, временной травмой руки или просто те, кто листает страницы с телефона на ходу в солнечный день.
Что понимают под доступностью сайта
Доступность (accessibility, часто сокращают до a11y) — это набор принципов и технических решений, которые делают сайт пригодным для использования людьми с разными возможностями восприятия и взаимодействия. Речь не только о незрячих пользователях со скринридерами. В более широком смысле сюда входят:
- слабовидящие люди, которым нужен крупный шрифт и контраст;
- дальтоники, которые не различают часть цветовой палитры;
- люди с нарушением моторики, работающие только с клавиатуры;
- пользователи с временными ограничениями — сломанная рука, яркое солнце на экране, шумное помещение без звука;
- пожилые посетители, для которых мелкий текст и запутанная навигация становятся барьером.
Международный стандарт в этой области — WCAG (Web Content Accessibility Guidelines). Он описывает уровни соответствия A, AA и AAA, но для большинства коммерческих сайтов достаточно ориентироваться на базовые принципы, а не гнаться за формальной сертификацией.
Зачем это нужно бизнесу
Есть три практические причины заниматься доступностью, даже если формальных требований к отрасли нет.
Расширение аудитории
Люди со сниженным зрением или моторными ограничениями составляют заметную долю населения любого города, включая Омск. Если сайт неудобен для них, часть потенциальных клиентов просто уходит к конкуренту, даже не оставив следа в аналитике — они закрывают вкладку до того, как долистают до формы заявки.
Улучшение сайта для всех остальных
Большинство приёмов доступности одновременно улучшают обычный пользовательский опыт: понятная структура заголовков, читаемый текст, логичный порядок элементов при табуляции. То, что помогает незрячему пользователю ориентироваться со скринридером, часто помогает и зрячему быстрее найти нужный раздел.
Требования в отдельных отраслях
Для сайтов государственных и муниципальных организаций, а также некоторых социальных сервисов требования к доступности могут быть закреплены нормативно. Если ваш проект относится к такой категории, стоит уточнять конкретные требования у профильных специалистов — это не тема общей статьи, а предмет отдельной проверки.
Мы не даём здесь юридических консультаций — если для вашего сайта доступность закреплена нормативным требованием, уточняйте актуальные критерии отдельно, у юриста или у профильного ведомства.
Базовые технические приёмы
Есть набор приёмов, которые закрывают большую часть проблем без глобальной переделки дизайна.
Контраст текста и фона
Светло-серый текст на белом фоне выглядит стильно в макете, но плохо читается на экране при ярком свете или у человека со сниженным зрением. Правило простое: основной текст должен быть контрастным по отношению к фону, декоративные и второстепенные подписи — тоже читаемыми, а не едва заметными.
Альтернативный текст для изображений
Атрибут alt у картинок — это не формальность для поисковиков, а то, что скринридер озвучивает вместо изображения. Пустой или бессмысленный alt вроде «image1» означает, что человек со скринридером просто не поймёт, что на фото.
Управление с клавиатуры
Часть посетителей не пользуется мышью — из-за моторных нарушений или просто по привычке работать с клавиатуры. Все интерактивные элементы — кнопки, ссылки, поля форм, выпадающие меню — должны быть доступны через клавишу Tab и иметь видимый фокус, чтобы человек понимал, на каком элементе он сейчас находится.
Структура заголовков
Скринридер умеет «перепрыгивать» по заголовкам h2, h3, чтобы человек быстро понял структуру страницы, не прослушивая её целиком. Если заголовки используются как попало — то для оформления жирным текстом, то пропускаются уровни — навигация по скринридеру превращается в хаос.
Чек-лист базовой доступности
- Текст читается без прищуривания даже на небольшом экране
- Цвет не единственный способ передать информацию (например, ошибки в форме не только красным текстом, но и подписью)
- У всех изображений заполнен атрибут alt
- Сайт логично работает при навигации только клавиатурой
- Формы имеют понятные подписи полей, а не только placeholder
- Видео и аудио снабжены подписями или текстовой расшифровкой, если это важный контент
- Размер кликабельных элементов удобен для нажатия пальцем на мобильном
Частые ошибки
| Ошибка | Почему это проблема |
|---|---|
| Placeholder вместо подписи поля | Текст исчезает при вводе, пользователь теряет контекст, скринридер может не озвучить его корректно |
| Мелкий серый текст на светлом фоне | Плохо читается при ярком освещении и людьми со сниженным зрением |
| Кнопки без подписи, только иконка | Скринридер озвучивает «кнопка» без пояснения, что она делает |
| Автопроигрывание видео со звуком | Мешает в общественных местах, раздражает и вызывает уход со страницы |
| Анимации, которые нельзя остановить | Могут мешать людям с вестибулярными нарушениями и просто раздражают |
Как проверить свой сайт
- Пройдите по сайту только с клавиатуры. Отключите мышь и попробуйте открыть меню, заполнить форму, отправить заявку — используя только Tab, Enter и стрелки.
- Проверьте контраст. Инструменты для проверки контрастности текста есть в браузерных панелях разработчика и в отдельных бесплатных сервисах — достаточно сравнить цвет текста и фона по нескольким ключевым блокам.
- Прослушайте страницу скринридером. Даже беглая проверка встроенным в операционную систему средством озвучивания покажет, насколько логично звучит структура страницы.
- Оцените размер кликабельных зон на мобильном. Кнопки и ссылки не должны быть настолько мелкими, что промахивается палец.
- Посмотрите на alt-тексты изображений. Откройте исходный код или используйте расширение браузера, которое показывает alt поверх картинок.
С чего начать, если сайт уже готов
Полная переделка ради доступности редко нужна. Чаще всего это точечные доработки: поправить контраст в стилях, заполнить alt-тексты, добавить видимый фокус на интерактивных элементах, проверить порядок табуляции в формах. Такую работу удобно вести в рамках обычной доработки сайта — без остановки текущей работы ресурса.
Если сайт создаётся с нуля, закладывать принципы доступности проще на этапе адаптивной вёрстки и проектирования дизайна: продумать контрастную палитру, читаемую типографику, понятную структуру заголовков сразу, а не переделывать потом.
Вывод
Доступность сайта — это не про соответствие формальному стандарту ради галочки, а про то, что удобный для всех сайт удерживает больше посетителей и превращает их в клиентов. Контрастный текст, понятные подписи, работа с клавиатуры и заполненные alt-атрибуты закрывают большую часть проблем без переделки дизайна. Если хотите проверить, насколько ваш сайт удобен для разных пользователей, и получить конкретный список доработок — обратитесь к нам через контакты, мы посмотрим сайт и подскажем, с чего начать.
