Доступность сайта для инвалидов - это не кнопка "увеличить шрифт" в углу экрана. Это набор требований к обычной вёрстке, половину которых верстальщик выполняет бесплатно, если знает о них до начала работы. Разбираем, что стоит за аббревиатурой WCAG и что из этого нужно вашему сайту.
Тему обычно поднимают в двух случаях: пришло замечание от проверяющих или заказчик увидел у конкурента панель с большими буквами и попросил такую же. Оба повода приводят к одному результату: покупается виджет, а сайт как был неудобным, так и остаётся.
WCAG (Web Content Accessibility Guidelines) - международный свод рекомендаций, на который опираются и российский ГОСТ Р 52872-2019, и требования к сайтам государственных и образовательных организаций. В оригинале это несколько сотен критериев, читать их подряд тяжело. Но вся конструкция стоит на четырёх принципах, и через них разобраться намного быстрее.
Что такое WCAG и почему принципов четыре
Логика простая. Контент должен дойти до человека (воспринимаемость), сайтом должно быть можно управлять любым способом ввода (управляемость), содержимое должно быть понятным (понятность), а разметка - корректно читаться программами (надёжность).
Речь не только про слепых. В аудиторию попадают слабовидящие, люди с нарушением цветовосприятия (это примерно 8% мужчин), с нарушениями моторики, слуха, а ещё все, у кого ограничение временное: сломанная рука, солнце на экране телефона, вагон метро без наушников. В России порядка 11 миллионов человек с инвалидностью, и это не считая пожилых, у которых просто садится зрение.
Воспринимаемость: контент должен дойти до человека
Alt у картинок. Атрибут описывает смысл изображения, а не то, что на нём нарисовано. У фото товара уместно название товара, у схемы - её вывод одной фразой, у декоративной завитушки - пустой alt="", чтобы диктор её пропустил. Типичная беда: alt="изображение_2024_final" или alt, набитый ключевыми словами.
Контраст текста. Минимум по уровню AA - 4,5:1 для обычного текста и 3:1 для крупного (от 24 пикселей или от 19 пикселей жирным). Модный серый #999999 на белом даёт 2,85:1 и требование не проходит. Проверяется за минуту в WebAIM Contrast Checker. Отдельная история - тёмная тема: инверсия цветов почти всегда ломает контраст в подписях и плейсхолдерах, об этом мы писали в разборе тёмной темы на сайте.
Информация не только цветом. Красная рамка у поля формы ничего не сообщает человеку с дальтонизмом. Нужен текст ошибки, иконка или подчёркивание. То же с графиками, где легенда различается только оттенком, и со звёздочками у обязательных полей.
Текст текстом, а не картинкой. Прайс, выложенный скриншотом из Excel, недоступен ни диктору, ни поиску, ни копированию.
Субтитры к видео. Для роликов с речью это требование уровня A. Автоматические субтитры площадки считаются, если их вычитали.
Масштаб до 200% без потери содержимого. Если при увеличении текст уезжает под соседний блок, требование не выполнено. Тот же самый дефект вылезает на телефонах, мы разбирали его в статье про ошибки мобильной версии.
Управляемость: всё должно работать с клавиатуры
Тест занимает десять минут: уберите руку с мыши и пройдите по сайту клавишей Tab. Открывается ли меню, работает ли слайдер, можно ли закрыть модальное окно клавишей Esc, не проваливается ли фокус куда-то за пределы экрана.
Видимый фокус. Строчка outline: none в CSS - самая дорогая строчка на всём сайте. Её пишут ради красоты, и после неё человек, идущий с клавиатуры, перестаёт понимать, где он находится. Убирать стандартную обводку можно только вместе с заменой на свою, заметную.
Размер кликабельной зоны. В WCAG 2.2 минимум 24 на 24 пикселя, комфортный ориентир - 44 на 44. Иконки соцсетей в подвале размером 16 пикселей не попадёт пальцем ни один человек с тремором.
Ссылка "к основному содержимому". Невидимая до фокуса ссылка в самом верху страницы, которая перепрыгивает шапку и меню. Без неё человек с клавиатуры на каждой странице заново прощёлкивает двадцать пунктов навигации.
Никаких ловушек и автоматики. Всплывающее окно, из которого нельзя выйти с клавиатуры, карусель без кнопки паузы, форма с таймером на заполнение - всё это прямые нарушения.
Понятность: формы, ошибки и предсказуемость
Подпись к полю - настоящий label, а не placeholder. Серая надпись внутри поля исчезает после первого символа, и человек забывает, что он тут вводит. Заодно placeholder обычно не проходит по контрасту.
Ошибки словами и рядом с полем. "Ошибка валидации" внизу формы бесполезна. Нужно: какое поле, что не так, как исправить. Например: "Телефон: введите 10 цифр после +7".
Структура заголовков. Один h1 на страницу, дальше h2 и h3 по порядку, без перескоков через уровень и без заголовков, поставленных ради размера шрифта. Экранные дикторы умеют листать страницу по заголовкам, это основной способ навигации.
Осмысленный текст ссылок. Четырнадцать ссылок "Подробнее" на странице в списке диктора превращаются в четырнадцать одинаковых строк.
Читаемая типографика. Сверхтонкие начертания, межстрочный интервал 1,1 и текст светло-серым по светло-серому убивают читаемость быстрее любого технического дефекта. Про выбор начертаний и подключение писали отдельно в материале про шрифты для сайта.
Надёжность: разметка, которую читают программы
Здесь всего два практических правила. Первое: использовать родные элементы. Кнопка должна быть <button>, а не <div> с обработчиком клика, ссылка - <a href>. Родные элементы уже умеют получать фокус, нажиматься с клавиатуры и правильно называть себя диктору.
Второе: ARIA-атрибуты добавлять только там, где родного элемента нет, и обязательно поддерживать их состояние в актуальном виде. Раскрывающееся меню с aria-expanded="false", который никогда не меняется на true, хуже, чем полное отсутствие атрибута.
Уровни A, AA и AAA: на какой ориентироваться
| Уровень | Что примерно входит | Кому подходит |
|---|---|---|
| A | Alt у картинок, работа с клавиатуры, субтитры, язык страницы | Абсолютный минимум, для регламентов обычно мало |
| AA | Всё из A плюс контраст 4,5:1, видимый фокус, масштаб 200%, подписи полей, размер зоны нажатия | Рабочий ориентир для бизнеса и для проверок |
| AAA | Контраст 7:1, сурдоперевод видео, отсутствие сложных формулировок | Точечно, целиком сайт по AAA почти никто не делает |
Практический вывод: целиться в AA. Все требования, которые мы видели в технических заданиях госзакупок и в предписаниях, укладываются в этот уровень.
Почему панель-виджет не заменяет вёрстку
Виджет умеет три вещи: увеличить шрифт, включить чёрно-белый или контрастный режим, отключить картинки. Это помогает слабовидящему посетителю, который пользуется обычным браузером.
Чего виджет не делает: не пишет alt за вас, не заставляет меню открываться с клавиатуры, не подписывает поля формы, не чинит структуру заголовков и не добавляет субтитры. Человек, который пользуется экранным диктором, до вашей панели даже не дойдёт: у него свои инструменты, и работают они с разметкой напрямую.
Подписка на такие сервисы стоит примерно от 500 до 3 000 рублей в месяц. Ставить панель имеет смысл тогда, когда её прямо требует регламент проверяющего органа, и никогда - вместо нормальной вёрстки. Подробнее про этот случай мы разбирали в статье про версию сайта для слабовидящих.
Кому обязательно, а кому просто выгодно
Обязательно: сайты госорганов и муниципальных учреждений, образовательных организаций (там требования к разделу описаны отдельно, см. материал про сайты школ и вузов), учреждений культуры и здравоохранения, а также любой подрядчик, если требование внесено в техническое задание госзакупки. Сам по себе ГОСТ Р 52872-2019 добровольный, но становится обязательным ровно в тот момент, когда на него сослались в контракте или регламенте.
Всем остальным доступность просто выгодна, и вот почему. Alt, осмысленные тексты ссылок, честная структура заголовков и текст текстом - это ровно то же, что требует поисковый робот. Крупные зоны нажатия и нормальный контраст - то же, что нужно человеку с телефоном на улице. Плюс возраст: если аудитория старше 45 лет, мелкий светло-серый шрифт стоит вам заявок прямо сейчас.
Честно и обратное: интернет-магазину аксессуаров для подростков доступность выручку не поднимет. Но если вы делаете сайт с нуля, она вам почти ничего и не стоит.
Как проверить свой сайт
Три уровня, каждый следующий дороже по времени.
- Автоматика, 15 минут. Вкладка Accessibility в Lighthouse (встроен в Chrome), расширение axe DevTools, сервис WAVE. Ловят контраст, отсутствующие alt и label, порядок заголовков, дубли идентификаторов. Покрывают примерно треть реальных проблем, но самые массовые находят сразу.
- Проход клавиатурой, 10 минут на шаблон. Только Tab, Shift+Tab, Enter, пробел и Esc. Проверяем: виден ли фокус, доступны ли меню, слайдер, модалка и форма, можно ли отправить заявку без мыши.
- Экранный диктор, час. NVDA бесплатный для Windows, VoiceOver встроен в macOS и iOS, TalkBack - в Android. Первые десять минут будет непривычно, зато сразу слышно, как звучат ваши "Подробнее" и "изображение_2024".
Внешний аудит доступности у подрядчиков стоит в пределах 15 000-60 000 рублей и обычно окупается тем, что список правок получается коротким и конкретным.
Чек-лист на 12 пунктов
- У всех содержательных картинок осмысленный alt, у декоративных - пустой.
- Контраст обычного текста не ниже 4,5:1, крупного - не ниже 3:1.
- Ни одно сообщение не передаётся только цветом.
- Весь сайт проходится клавишей Tab, порядок фокуса совпадает с порядком на экране.
- Фокус видно на каждом интерактивном элементе.
- Кликабельные зоны не меньше 24 пикселей, у важных кнопок - от 44.
- У каждого поля формы есть подпись label, а не только placeholder.
- Ошибки формы описаны словами и показаны рядом с полем.
- Заголовки идут по уровням: один h1, дальше без перескоков.
- Тексты ссылок понятны вне контекста, "Подробнее" в списке нет.
- У страницы указан язык, у видео с речью есть субтитры.
- Страница не разваливается при увеличении масштаба до 200%.
Двенадцать пунктов закрывают большую часть уровня AA. Если проходите их на своём сайте и не находите нарушений, дальше можно звать специалиста точечно, а не заказывать полный аудит.
Что делать в первую очередь
Начните с трёх вещей, которые дают больше всего эффекта за меньшее время: контраст текста, видимый фокус и подписи у полей форм. Дальше пройдите сайт клавиатурой и почините то, до чего невозможно добраться без мыши. Виджет-панель ставьте последней и только если её требует регламент, а не вместо перечисленного. Основная мысль такая: доступность на 80% состоит из аккуратной вёрстки, и стоит она денег только тогда, когда о ней вспомнили после сдачи проекта.
Если сайту предстоит переделка, самое дешёвое время заложить эти требования - до отрисовки макетов: дизайнер сразу проверяет пары цветов, верстальщик сдаёт работу с проходом по клавиатуре. Как мы встраиваем такую проверку в переделку существующих сайтов, описано на странице редизайна.
