Доступность сайта по WCAG: контраст, навигация с клавиатуры и скринридеры — чек-лист доработок
Почему B2B-сайту тоже нужна доступность
Многие думают, что доступность — это благотворительность для людей с инвалидностью и к B2B-сайту, который продаёт оборудование и собирает заявки, отношения не имеет. Это верно лишь наполовину. Реальных причин три: в анкетах поставщика от крупных заказчиков из Европы и США вопрос «соответствует ли сайт WCAG» уже стал обязательным; часть штатов США и закупки ЕС предъявляют требования к доступности для государственных и публичных контрактов; а главное — семантичный HTML одинаково удобен и для поисковиков, и для ИИ-краулеров.
Контринтуитивный вывод здесь такой:Доработка по доступности — не дополнительные расходы: это тот же код, что нужен для SEO, структурированных данных и цитирования ИИ. Заменить div-кнопки на настоящий button, добавить alt к изображениям, выстроить иерархию размеров шрифта — для скринридера это необходимость, а для Google и больших моделей это плюс к пониманию структуры страницы. Что именно входит в объём работ, смотрите Доступность сайта (WCAG): что обязательно, а что можно отложить.
| Категория доработки | Жёсткое требование WCAG 2.2 AA | Частая ошибка | Стоимость исправления |
|---|---|---|---|
| Контраст текста | Основной текст ≥ 4.5:1, крупный ≥ 3:1 | Светло-серый текст на белом, около 2.5:1 | Полдня |
| Фокус клавиатуры | Все интерактивные элементы доступны по Tab и фокус виден | outline:none убирает рамку фокуса | Один день |
| Alt изображения | У информативных изображений описательный alt, у декоративных — пустой | alt везде «image» или пустой | Два дня |
| Иерархия заголовков | h1 → h2 → h3 без пропусков | Прыжок с h2 сразу на h4 | Полдня |
| Подписи полей формы | У каждого поля ввода видимая подпись label | Вместо подписи только placeholder | Один день |
Шаг первый: поднять контраст до 4.5:1
Контраст — самый простой показатель для измерения и самопроверки. Правило простое: для крупного текста от 18 пунктов (примерно 24 пикселя) или жирного текста от 14 пунктов (примерно 18,66 пикселя) требуется 3:1; для остального текста, мелкого шрифта и надписей на кнопках — 4,5:1. Серый мелкий текст на светлом фоне — самая частая ошибка на сайтах: дизайнер ради «премиального вида» делает основной текст цветом #888 на фоне #f5f5f5, а реальный контраст получается чуть больше 2:1.
Для самопроверки не нужно покупать инструменты: установите в браузере расширение axe или WAVE, и сканирование в один клик подсветит все элементы с недостаточной контрастностью. При исправлении не меняйте дизайн целиком — просто затемните те несколько цветов, которые не проходят: основной текст с #888 до #555 обычно уже даёт 4,5:1, а затраты почти нулевые. Это тот же подход, что и в оптимизации производительности — сначала брать низко висящие плоды, см.Core Web Vitals— там описано, как расставлять приоритеты по выгоде.
| Тип элемента | Требование контрастности AA | Как проверить | Частые способы исправления |
|---|---|---|---|
| Основной мелкий текст | ≥ 4.5:1 | axe/WAVE отмечает автоматически | Затемнить цвет текста на один шаг |
| Крупные заголовки | ≥ 3:1 | То же | Обычно уже соответствует |
| Текст на кнопках | ≥ 4.5:1 | Проверять вместе с фоном | Затемнить текст кнопки или фон |
| Границы и иконки интерфейса | ≥ 3:1 | Контраст с соседним фоном | Затемнить цвет границы |
| Текст в неактивном состоянии | Можно не исправлять | Убедитесь, что элемент действительно неактивен | Не обязательно менять |
Три. Второе: уберите мышь и пройдите весь сайт с клавиатуры
Способ проверки клавиатурной навигации только один: отключите мышь и пройдите с помощью Tab, Shift+Tab, Enter и Esc четыре страницы — главную, список товаров, карточку товара и форму обратной связи — от начала до конца. Вы сразу обнаружите три типа проблем: фокусное кольцо убито CSS-правилом outline: none, и непонятно, где вы находитесь; выпадающее меню написано на чистом JS, и с клавиатуры в него не попасть; после открытия модального окна фокус застревает внутри и не выходит — это называется клавиатурной ловушкой.
Сценарий первый: «псевдокнопка», сделанная из div. Дизайнер для экономии времени сделал div с обработчиком клика — пользователь с клавиатуры не может ни перейти на него через Tab, ни активировать через Enter. Исправление — не дописывать JS, а просто заменить на нативный button: он изначально поддерживает клавиатуру и имеет доступное имя.Сценарий второй: фокусное кольцо не видно. Во многих глобальных стилях прописано *:focus { outline: none }, что удаляет стандартную рамку фокуса браузера. Правильно — сохранить чёткий стиль фокуса, например синюю внешнюю обводку 2px, а не удалять её полностью. О том, как сочетать семантику и структурированные данные, см.Структурированные данные Schema.
| Пункт проверки клавиатурой | Критерий нормы | Признак несоответствия | Способ исправления |
|---|---|---|---|
| Порядок Tab | Совпадает с визуальным порядком чтения | Перескакивает, не доходит до кнопок | Изменить порядок DOM или tabindex |
| Видимость фокуса | У текущего элемента фокуса чёткая обводка | outline удалён, ничего не видно | Добавить стиль :focus-visible |
| Выпадающий список | Раскрытие выбора стрелками | Работает только мышью | Заменить на нативный select или добавить поддержку клавиатуры |
| Модальное окно | Фокус переходит в окно, Esc закрывает | Фокус застревает и не выходит | Реализовать захват и освобождение фокуса |
| Ссылка для перехода | На длинных страницах есть «перейти к основному содержимому» | Каждый раз десятки переходов по вкладкам навигации | Добавьте ссылку skip to content |
Четвёртое, третье дело: сделать так, чтобы скринридер понимал страницу
Пользователь скринридера слышит «семантический каркас» HTML, а не тот дизайн, который видите вы. Каркас держится на трёх вещах: alt-текст, иерархия заголовков и ARIA-атрибуты. alt — это не «дать картинке имя файла», а одной фразой объяснить, что она сообщает. А у декоративных разделителей должно быть alt=””, чтобы скринридер их пропускал и не читал слово «кнопка».
Иерархия заголовков — ещё одна зона бедствия. Часто, чтобы заголовок выглядел крупнее, верстальщики ставят h4 или даже p с CSS — и скринридер после h2 сразу читает h4, пользователь вообще не понимает структуру документа. Правило механическое: на странице один h1, под ним равнозначные h2, подразделы через h3, перепрыгивать нельзя. У кнопок-иконок (лупа, гамбургер-меню) нет текста, поэтому нужен aria-label, иначе скринридер прочитает только «кнопка» и пользователь не поймёт, что произойдёт по нажатию. О том, какие формулировки дружелюбны к зарубежным покупателям, читайте в гайд по тону для текстов на сайте.
| Что проверить | Правильный подход | Частая ошибка | Проверка инструментами |
|---|---|---|---|
| alt у инфографики | Опишите ключевой вывод | alt=”фото товара”, информации нет | Что слышит скринридер |
| alt для декоративной картинки | alt=”” оставить пустым | Читает бессмысленное имя файла | Проверьте, пропускается ли |
| Иерархия заголовков | h1>h2>h3 по порядку | с h2 сразу на h4 | axe отмечает пропуск уровня |
| Кнопка-иконка | Добавьте aria-label=”поиск” | Читается только «кнопка» | NVDA/VoiceOver |
| Таблицы | Заголовки таблицы через th | Всё свёрстано на td | Читает ли строку с заголовком |
Пятое, приёмка: автоматический прогон, потом ручная доводка
Последнее заблуждение — «если плагин axe показал зелёное, значит всё соответствует требованиям». Автоматические инструменты покрывают примерно 30–40% проблем доступности: контраст, отсутствующий alt, пропуск уровней заголовков они ловят, а клавиатурные ловушки, порядок фокуса и реальный опыт со скринридером — нет. Полная приёмка — это три обязательных шага: прогнать axe, вручную пройти клавиатурой четыре ключевые страницы и прослушать главную в NVDA (Windows) или VoiceOver (Mac).
По приоритету сначала берите то, что «не трогает дизайн, а только код»: контраст, иерархия заголовков, alt, фокусное кольцо. Здесь дизайнер не нужен, разработчик справится за два дня. Задачи с переделкой взаимодействия (кастомные выпадающие списки, управление фокусом в модальных окнах) — во вторую очередь: работы много, но таких мест мало. Цельтесь в WCAG 2.2 AA и не гонитесь за AAA: AAA требует контраста основного текста 7:1, а в реальном дизайне это часто идёт в ущерб внешнему виду, и затраты не окупаются.
| Способ приёмки | Что находит | Доля покрытия | Частота |
|---|---|---|---|
| Автопрогон axe/WAVE | Контраст, отсутствие alt, пропуск уровней заголовков | Примерно 30–40% | Перед каждым релизом |
| Ручной обход клавиатурой | Порядок фокуса, клавиатурные ловушки | Автоматика не находит | Раз в месяц |
| Прослушивание в NVDA/VoiceOver | Опыт со скринридером, имена в aria | Автоматика не находит | Раз в квартал |
| Отзывы реальных пользователей | Проблемы в реальном использовании | Точнее всего, но медленнее всего | Постоянно пополняем |
FAQ: частые вопросы
WCAG 2.1, 2.2, AA или AAA — что выбрать?
У нас небольшой сайт — сколько дней займёт доработка доступности?
Если плагин axe показывает всё зелёным, значит, мы соответствуем требованиям?
Какой длины должен быть alt у изображения и что в нём писать?
Мы используем готовую тему — нужно ли самим дорабатывать доступность?
Доступность конфликтует с SEO? Не придётся ли отказаться от дизайна?
В заключение
Адаптацию под доступность проще всего превратить в показуху «соответствуем ради соответствия»: прогнать плагин, сделать пару скриншотов и приложить их к отчёту. Гораздо полезнее разбить её на список задач P0, которые реально закрыть за три дня: сначала привести в порядок контраст и иерархию заголовков, затем пройти весь сайт с клавиатуры, и в конце дополнить alt и aria. После этого ваш сайт станет доступен для скринридеров, а поисковикам и AI-краулерам — понятнее.
Три шага на практике: первый — запустить axe по всему сайту и свести в таблицу проблемы с контрастом, отсутствующие alt и пропущенные уровни заголовков; второй — отложить мышь и пройти Tab’ом главную, страницу товара и страницу с формой, записав все места, где фокус застревает; третий — раз в месяц запускать автоматическую проверку перед публикацией и раз в квартал полностью прослушивать главную через скринридер. На мультиязычных сайтах следите ещё и за полнотой переводов alt и заголовков, см.Работа с графиками на многоязычном сайте.
Запомните одну фразу: доступность — это не заплатка для особых групп, а умение написать веб-страницу человеческим языком. Скринридер понимает — поисковик читает, AI приводит к вам.