Я Максим, веб-разработчик. Доступность сайта — это возможность пользоваться им людям с ограничениями: незрячим со скринридером, людям с нарушением моторики, тем, кто не различает цвета. Многие считают это темой только для госсайтов. На деле доступность расширяет вашу аудиторию, помогает SEO и иногда требуется по закону. Разбираю, что такое доступность на практике, где она обязательна и как привести сайт в порядок без переделки всего.
Что такое доступность на практике
Доступность (a11y, от accessibility) означает, что сайтом можно пользоваться разными способами:
- незрячий человек слушает сайт через скринридер — ему нужны текстовые описания и правильная разметка;
- человек без мыши ходит по сайту с клавиатуры — нужна корректная навигация по Tab;
- слабовидящий увеличивает текст или нуждается в контрасте;
- человек с дальтонизмом не должен терять смысл, если информация передана только цветом.
Стандарт, на который ориентируются, — WCAG, международные рекомендации по доступности веб-контента.
Где доступность обязательна
Честно про требования в России:
- для сайтов госорганов и ряда социально значимых организаций доступность обязательна — есть ГОСТ Р 52872 по доступности интернет-ресурсов;
- для остального бизнеса это пока добровольно;
- требования постепенно расширяются, а крупные компании — банки, операторы — внедряют доступность сами.
Даже там, где закон не обязывает, доступность остаётся вопросом охвата аудитории и репутации.
Почему это выгодно бизнесу
Аргументы помимо закона:
- больше аудитории: людей с теми или иными ограничениями немало, и каждый из них потенциальный клиент;
- доступность пересекается с SEO: семантическая разметка, alt-тексты и понятная структура помогают и скринридеру, и поисковому роботу;
- удобнее становится всем: понятная навигация и контраст работают для каждого, не только для людей с ограничениями;
- меньше юридических рисков по мере ужесточения требований.
Что проверить и поправить: основное
Практический минимум, который закрывает большую часть:
- Alt-тексты к изображениям — описание для тех, кто не видит картинку; заодно польза для SEO;
- Контраст текста и фона — светло-серый по белому не читается ни слабовидящим, ни на солнце;
- Навигация с клавиатуры — по сайту, формам и меню можно пройти на Tab, и виден фокус;
- Семантическая разметка — правильные заголовки, кнопки и ссылки вместо «div на всё»;
- Подписи к полям форм — поле понятно скринридеру, ошибки читаются;
- Не только цвет — статус и смысл не передаются исключительно цветом;
- Размер кликабельных элементов — кнопки достаточно крупные для пальца на телефоне.
ARIA и где не переусердствовать
Для сложных компонентов — модальных окон, выпадающих меню, табов — есть ARIA-атрибуты, которые объясняют скринридеру, что это и в каком оно состоянии. Но правило простое: сначала правильная семантика HTML, ARIA только там, где её не хватает. Криво навешанные ARIA-атрибуты делают хуже, чем их отсутствие. Семантичная кнопка лучше, чем div с десятком атрибутов.
Как подойти к задаче
- проведите аудит: пройдите сайт с клавиатуры, включите скринридер, проверьте контраст;
- начните с основ — alt, контраст, семантика, клавиатура: это даёт максимум эффекта;
- сложные интерактивные блоки доводите отдельно;
- закрепите правила, чтобы новый контент и компоненты сразу делались доступными.
Чек-лист
- Alt-тексты ко всем смысловым изображениям.
- Достаточный контраст текста и фона.
- Полная навигация с клавиатуры и видимый фокус.
- Семантическая разметка вместо «div на всё».
- Подписи и понятные ошибки в формах.
- Смысл не передаётся одним лишь цветом.
- Крупные кликабельные элементы для мобильных.
- ARIA только там, где семантики не хватает.
Мой совет
Доступность складывается из набора правильных практик, которые к тому же помогают SEO и удобны всем посетителям. Отдельным дорогим проектом она быть не обязана. Начните с основ: alt-тексты, контраст, клавиатура, семантика — это даёт большую часть результата малой кровью. А если ваш сайт попадает под обязательные требования, тянуть не стоит. Нужно проверить сайт на доступность и привести его в порядок — пишите.
