Доступность сайта: практическое руководство по WCAG 2.2
Как применять WCAG 2.2 на своём сайте, исправить частые проблемы, провести 30-минутную ручную проверку и понять связь доступности с удобством.
Частые вопросы
Что значит, что сайт соответствует WCAG?
Это значит, что сайт отвечает критериям успешного прохождения Руководства по доступности веб-контента (WCAG) на выбранном уровне, обычно WCAG 2.1 или 2.2 уровня AA. Уровень AA включает все критерии уровней A и AA. В большинстве законов и закупочных требований, где упоминается WCAG, указан уровень AA.
Как применить рекомендации WCAG к своему сайту?
Откройте краткий справочник W3C «Как соответствовать WCAG», отфильтруйте критерии уровней A и AA и для каждого прочитайте страницу «Понимание критерия»: там простым языком объясняется его смысл. Затем проверяйте основные шаблоны — главную страницу, страницу с контентом, форму и оформление заказа, — а не каждую страницу по отдельности.
Может ли виджет или плагин доступности привести сайт в соответствие с WCAG?
Нет, один инструмент не может сам по себе обеспечить соответствие. Виджеты с панелью настроек не исправляют исходный код, а многие люди с инвалидностью и специалисты по доступности сообщают, что такие виджеты мешают. Исправляйте непосредственно HTML, контраст, подписи и поддержку клавиатуры.
Чем удобство пользования отличается от доступности?
Доступность означает, что люди с инвалидностью могут воспринимать сайт, понимать его, перемещаться по нему и взаимодействовать с ним. Удобство — это простота и эффективность использования для всех. Эти понятия тесно связаны: понятные подписи, хороший контраст и предсказуемая навигация помогают всем посетителям.
Находит ли автоматическая проверка все проблемы доступности?
Нет. WAVE, axe и Lighthouse находят такие проблемы, как отсутствие альтернативного текста, низкий контраст и неподписанные поля. Но многие критерии — например, осмысленен ли альтернативный текст и логичен ли порядок фокуса — должен проверять человек.
Сайт, соответствующий WCAG, отвечает требованиям Руководства по доступности веб-контента на выбранном уровне. Для почти любого бизнеса это означает WCAG 2.2 уровня AA. На практике большинство сайтов допускает одни и те же ошибки: низкий контраст цветов, отсутствие альтернативного текста у изображений и подписей у полей форм, пустые ссылки и кнопки, а также недоступные с клавиатуры элементы. Исправьте их, а затем проверьте сайт с клавиатурой и программой экранного доступа — так вы устраните многие проблемы, с которыми сталкиваются реальные пользователи.
В этом руководстве объясняется, как разобраться в WCAG, какие исправления важнее всего и как самостоятельно провести 30-минутную проверку.
Как устроен WCAG
Руководство WCAG публикует W3C. Оно состоит из нескольких уровней:
Четыре принципа, известные как POUR: контент должен быть воспринимаемым (Perceivable), управляемым (Operable), понятным (Understandable) и надёжным (Robust).
Рекомендации к каждому принципу, например «Текстовые альтернативы» или «Доступность с клавиатуры».
Критерии успешного прохождения для каждой рекомендации. Это проверяемые правила с нумерацией (например, 1.4.3 «Контраст») и уровнем A, AA или AAA.
Уровень A — минимальный. Уровень AA обычно выбирают для соответствия законам и закупочным требованиям. Уровень AAA строже и редко требуется для всего сайта.
В октябре 2023 года WCAG 2.2 получил статус рекомендации W3C. В него добавили критерии минимального размера интерактивных элементов, видимости фокуса и доступной аутентификации, а устаревший критерий 4.1.1 «Разбор кода» удалили.
Как применять WCAG к своему сайту
Спецификация написана как стандарт, потому что это и есть стандарт. Практический порядок действий:
Для каждого критерия прочитайте связанную страницу «Понимание критерия». В ней простым языком объясняется его смысл и приводятся примеры соответствия и несоответствия.
Вместо проверки каждой страницы проверьте шаблоны: главную, стандартную страницу с контентом, запись блога, форму, страницу товара или оформления заказа. Исправление шаблона затронет все созданные на нём страницы.
Записывайте проблему, номер критерия, страницу и способ исправления.
Исправления, которые устраняют большинство частых проблем
1. Контраст цветов (1.4.3 и 1.4.11)
Обычный текст: не менее 4.5:1 относительно фона.
Крупный текст (примерно 24px обычным начертанием или от 18.66px полужирным): не менее 3:1.
Элементы интерфейса и значимая графика (рамки кнопок, контуры полей, информативные значки): не менее 3:1.
Чаще всего проблемы возникают из-за светло-серого текста подсказок и белого текста на бледных фирменных цветах. Проверьте контраст с помощью средства WebAIM или инструментов разработчика в браузере.
2. Текстовые альтернативы для изображений (1.1.1)
Для информативных изображений укажите альтернативный текст с описанием важного: alt="Technician replacing a furnace filter".
Для декоративных изображений используйте пустой alt: alt="", чтобы программы экранного доступа их пропускали.
Текст с изображений (например, снимка рекламного флаера или меню в формате JPG) должен быть доступен и в виде обычного текста.
Для изображения-ссылки, например логотипа, ведущего на главную, укажите назначение: alt="Acme Plumbing home".
3. Подписи полей и ошибки форм (1.3.1, 3.3.1, 3.3.2)
У каждого поля должна быть видимая подпись <label>, связанная с ним. Текст-подсказка внутри поля — не подпись: после ввода он исчезает.
Сообщение об ошибке должно объяснять, что не так и как это исправить («Введите номер телефона с кодом города»), причём текстом, а не только красной рамкой.
Обязательные поля обозначайте текстом или доступным индикатором, а не одним цветом.
4. Управление с клавиатуры (2.1.1, 2.4.3, 2.4.7)
Все ссылки, кнопки, меню и поля формы должны работать с клавишами Tab, Shift+Tab, Enter и пробелом.
Порядок перехода фокуса должен совпадать с визуальным порядком элементов.
Индикатор фокуса должен быть виден. Удаление рамки браузера через outline: none без замены — распространённая ошибка.
Выпадающие меню и модальные окна должны открываться, работать и закрываться с клавиатуры. Пока модальное окно открыто, фокус должен оставаться внутри него.
5. Ссылки и кнопки с понятными названиями (2.4.4, 4.1.2)
У кнопок только со значком (гамбургер-меню, лупа поиска, значки соцсетей) должно быть доступное имя: видимый текст, aria-label или скрытый текст.
Не заполняйте страницу ссылками «Нажмите здесь» и «Подробнее». Текст ссылки должен описывать её назначение; иначе задайте каждой ссылке уникальное доступное имя.
6. Структура и заголовки (1.3.1, 2.4.6)
На каждой странице должен быть один <h1>, описывающий её содержание.
Заголовки должны идти в логичном порядке (h2 для разделов, h3 внутри них), а не выбираться по размеру шрифта.
Используйте настоящие списки, таблицы с ячейками заголовков и семантические области (<header>, <nav>, <main>, <footer>).
Укажите язык страницы: <html lang="en">.
7. Новые критерии WCAG 2.2, о которых полезно знать
2.5.8 Размер цели (минимум), AA: интерактивная область должна быть не меньше 24 на 24 CSS-пикселя либо вокруг меньшего элемента должно быть достаточно свободного места.
2.4.11 Фокус не перекрыт (минимум), AA: фиксированные шапки, баннеры cookie и виджеты чата не должны полностью закрывать элемент в фокусе.
3.3.8 Доступная аутентификация (минимум), AA: не требуйте разгадывать головоломки или запоминать информацию для входа без альтернативы; разрешите менеджеры паролей и вставку.
3.3.7 Повторный ввод данных, A: не заставляйте людей повторно вводить информацию, уже предоставленную в рамках того же процесса.
8. Медиа и анимация
Для видео нужны субтитры (1.2.2); у предварительно записанного видео также должны быть аудиоописание или текстовая альтернатива для важной визуальной информации.
Для автоматически движущегося контента длительностью более пяти секунд предусмотрите возможность приостановки (2.2.2).
Автоматические инструменты выявляют только часть проблем. Добавьте эту проверку для каждого важного шаблона.
С 0-й по 5-ю минуту: автоматическое сканирование. Запустите WAVE (расширение браузера), axe DevTools или раздел доступности в Lighthouse. Исправьте очевидные ошибки: отсутствие alt и подписей, низкий контраст.
С 5-й по 15-ю минуту: только клавиатура. Отложите мышь и пройдите страницу клавишей Tab сверху вниз.
Всегда ли видно, где находится фокус?
Можно ли открыть и закрыть меню, заполнить каждое поле и отправить форму?
Есть ли ссылка «Перейти к содержимому» и работает ли она?
Не скрывается ли фокус за фиксированной шапкой или баннером?
С 15-й по 25-ю минуту: программа экранного доступа. Используйте VoiceOver (встроен в macOS и iOS) или NVDA (бесплатная программа для Windows).
Прослушайте список заголовков. Помогает ли он понять содержание страницы?
Перейдите к изображениям и кнопкам. Понятно ли их назначение вне контекста?
Заполните форму. Озвучивается ли подпись каждого поля? Объявляются ли ошибки?
С 25-й по 30-ю минуту: масштабирование и перестроение. Увеличьте масштаб браузера до 200%, а затем до 400%. При масштабе 400% контент должен перестроиться в одну колонку без горизонтальной прокрутки (1.4.10 «Перестроение»), а элементы не должны обрезаться.
Как связаны удобство и доступность
Люди, которые ищут «удобство и доступность сайтов», верно объединяют эти темы. Почти каждое исправление доступности улучшает удобство для всех:
Исправление для доступности
Кому ещё помогает
Хороший контраст
Тем, кто смотрит в телефон на солнце
Видимые подписи
Тем, кто торопится заполнить форму
Субтитры
Тем, кто смотрит видео без звука
Поддержка клавиатуры
Опытным пользователям и людям со сломанным тачпадом
Большие области нажатия
Всем, кто пользуется телефоном
Понятные сообщения об ошибках
Всем, кто допустил опечатку
Виджеты, заявления и законодательство
Виджеты: инструменты, обещающие соответствие стандартам одним нажатием, не меняют исходный код. Исправляйте сам сайт.
Заявление о доступности: опубликуйте короткую страницу, укажите применяемый стандарт, известные проблемы и способы связаться с вами за помощью или альтернативным форматом.
Правовой контекст: требования зависят от страны. Европейский акт о доступности применяется ко многим товарам и услугам в ЕС с июня 2025 года; в США к сайтам часто применяют ADA; для государственного сектора нередко действуют отдельные правила. Обратитесь за юридической консультацией по вашей ситуации.
Контрольный список
[ ] Контраст: 4.5:1 для текста, 3:1 для крупного текста и элементов интерфейса
[ ] Альтернативный текст у информативных изображений, пустой alt у декоративных
[ ] У каждого поля есть видимая связанная подпись
[ ] С сайтом можно работать с клавиатуры, индикатор фокуса виден
[ ] У кнопок со значками есть доступные имена
[ ] Заголовки и семантические области идут в логичном порядке, язык страницы указан
[ ] Интерактивные области не меньше 24 на 24 CSS-пикселей
[ ] У видео есть субтитры, а анимацию можно приостановить
[ ] При масштабе 400% контент перестраивается
[ ] Заявление о доступности опубликовано
Доступность также полезна для поискового продвижения: заголовки, альтернативный текст и описательные ссылки относятся и к основам SEO на странице — подробнее в нашем контрольном списке внутренней SEO-оптимизации.
We.Inc создаёт сайты на основе стандартного кода HTML, CSS и React, который можно редактировать напрямую. Поэтому вы можете сами исправить подписи, альтернативный текст и контраст или попросить внести изменения в чате. Всегда вручную проверяйте опубликованный сайт по инструкциям выше.