Доступность сайта для всех пользователей

Что такое доступность и почему это касается всех

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

Часто доступность воспринимают как узкую тему «для людей с инвалидностью». Это ошибка. Ограничения бывают не только постоянными, но и временными или ситуативными:

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

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

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

Четыре принципа доступности

Рекомендации WCAG строятся на четырёх принципах. Их удобно использовать как рамку для проверки любого сайта.

Дальше разберём, как эти принципы превращаются в конкретные практические правила.

Текст и цвет: контраст, размер, читаемость

Самые частые проблемы доступности связаны с самым базовым — текстом.

Контраст. Светло-серый текст на белом фоне выглядит изящно на макете, но многие люди его просто не прочитают. Для основного текста рекомендуемое соотношение контраста — не ниже 4,5 к 1, для крупных заголовков — не ниже 3 к 1. Проверить контраст можно любым онлайн-калькулятором контраста или инструментами разработчика в браузере.

Размер шрифта. Основной текст мельче 16 пикселей тяжело читать большинству людей старшего возраста и людям со слабым зрением. Важно, чтобы текст корректно увеличивался масштабированием браузера до 200% без поломки вёрстки и горизонтальной прокрутки.

Межстрочный интервал и длина строки. Слишком плотный текст и строки на всю ширину широкого экрана утомляют. Межстрочный интервал около 1,5 и длина строки в разумных пределах заметно улучшают восприятие.

Цвет не должен быть единственным носителем смысла. Если ошибка в форме обозначена только красной рамкой, человек с нарушением цветовосприятия её не заметит. Добавляйте текст или иконку: «Введите номер телефона». То же с графиками, обязательными полями, статусами заказа.

Шрифты. Декоративные, рукописные и сверхтонкие шрифты хороши для акцентов, но не для основного текста.

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

Изображения, видео и аудио

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

Альтернативный текст (alt). У каждого содержательного изображения должно быть описание, передающее его смысл. Не «картинка» и не «IMG_4521», а, например, «Мастер укладывает плитку в ванной комнате». Для фото товара — название и ключевые визуальные особенности. Декоративные изображения, которые не несут смысла, наоборот, должны иметь пустой alt, чтобы диктор их пропускал.

Текст на картинках. Если важная информация — акция, цена, условия — существует только в виде картинки, она недоступна диктору и часто плохо читается на телефоне. Лучше делать такой текст настоящим текстом поверх изображения.

Графики и схемы. Сложное изображение нужно дополнять текстовым пояснением рядом: что показано и какой вывод.

Видео. Нужны субтитры для тех, кто не слышит или смотрит без звука. Для роликов, где важна визуальная часть без комментариев, полезно текстовое описание.

Автовоспроизведение. Видео и звук, которые запускаются сами, мешают людям с экранным диктором (звук перекрывает речь программы) и раздражают всех остальных. Если автозапуск необходим, то без звука и с понятной кнопкой остановки.

Анимация и мигание. Быстро мигающие элементы могут быть опасны для людей с эпилепсией, а активная анимация вызывает дискомфорт у людей с вестибулярными нарушениями. Уважайте системную настройку «уменьшить движение».

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

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

Что нужно проверить:

1. Все интерактивные элементы доступны клавишей Tab. Ссылки, кнопки, поля форм, переключатели, элементы меню, кнопки слайдера.
2. Порядок перехода логичный. Фокус движется слева направо и сверху вниз, а не прыгает хаотично по странице.
3. Фокус виден. Вокруг активного элемента должна быть заметная рамка или подсветка. Частая ошибка — дизайнер убирает стандартную обводку фокуса, потому что она «некрасивая», и человек перестаёт понимать, где находится.
4. Нет ловушек. Открыв всплывающее окно или выпадающее меню, из него можно выйти клавишей Esc или Tab, а не застрять навсегда.
5. Есть ссылка «Перейти к содержанию». Она позволяет пропустить длинное меню и сразу попасть к основному тексту.

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

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

Структура и разметка: что «видит» экранный диктор

Экранный диктор не видит дизайн. Он опирается на код страницы, поэтому правильная разметка — основа доступности.

• Заголовки по иерархии. Один главный заголовок страницы, под ним разделы второго уровня, внутри них — третьего. Незрячие пользователи часто перемещаются по странице именно по заголовкам, как по оглавлению. Если заголовки выбраны «по размеру шрифта», а не по смыслу, навигация ломается.
• Смысловые элементы. Шапка, навигация, основное содержимое, подвал должны быть размечены соответствующими элементами, а кнопки — быть кнопками, а не блоками, на которые «повесили» клик.
• Понятные тексты ссылок. Ссылки «подробнее», «тут», «читать далее», зачитанные списком, ничего не говорят. Лучше «Подробнее о доставке» или «Условия гарантии».
• Списки и таблицы. Перечни должны быть списками, табличные данные — таблицами с заголовками столбцов.
• Язык страницы. Указание языка в коде помогает диктору выбрать правильное произношение.

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

Формы, которые может заполнить каждый

Формы — место, где доступность напрямую превращается в заявки и продажи.

• У каждого поля есть подпись. Не только серая подсказка внутри поля, которая исчезает при вводе, а постоянная подпись, связанная с полем в коде.
• Обязательные поля отмечены явно, а не только цветом звёздочки.
• Ошибки понятны. Не «Неверный ввод», а «Укажите номер в формате 9XX XXX XX XX». Сообщение об ошибке появляется рядом с полем и озвучивается диктором.
• Ничего не стирается. При ошибке введённые данные сохраняются, человек исправляет одно поле, а не заполняет всё заново.
• Капча не блокирует людей. Визуальная капча с искажёнными буквами непроходима для незрячих. Существуют менее навязчивые способы защиты от спама.
• Подтверждение отправки. После отправки должно быть явное сообщение, что заявка принята, — доступное и для зрячих, и для диктора.

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

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

1. Пройдите сайт без мыши. Только клавиатура: Tab, Shift+Tab, Enter, пробел, стрелки. Получилось ли оформить заявку?
2. Увеличьте масштаб до 200%. Не развалилась ли вёрстка, не появилась ли горизонтальная прокрутка, не перекрывают ли элементы друг друга?
3. Проверьте контраст основного текста, кнопок, ссылок и подписей полей.
4. Отключите изображения в браузере или посмотрите на страницу через инструмент, показывающий alt-тексты. Понятно ли, что было на картинках?
5. Включите экранный диктор. Он встроен в большинство операционных систем и смартфонов. Попробуйте с закрытыми глазами найти телефон компании и записаться на услугу.
6. Запустите автоматическую проверку. Существуют бесплатные расширения браузера и встроенные аудиты в инструментах разработчика, которые находят часть проблем: отсутствующие alt, низкий контраст, поля без подписей.

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

С чего начать и как не превратить доступность в проект на годы

Сделать сайт полностью соответствующим всем критериям сразу сложно, особенно если он большой и давно работает. Разумнее двигаться по шагам.

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

Вторая очередь — структура заголовков, тексты ссылок, сообщения об ошибках, субтитры к видео, отказ от автовоспроизведения.

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

И главное — закладывать доступность в новые разработки с самого начала. Мы в КомРА обычно учитываем базовые требования ещё на этапе прототипа и дизайна: контраст, размеры, состояния фокуса, подписи полей. Так это почти не увеличивает объём работ, тогда как исправление готового сайта обходится заметно дороже.

Итог

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

Коротко о главном:

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

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