Проверка доступности HTML (WCAG 2.2)

Вставьте фрагмент HTML или всю страницу. Проверка показывает её в изолированном фрейме, запускает в вашем браузере открытый движок axe-core и выводит проблемы по степени влияния: каждая с кодом, не прошедшим проверку, критерием успеха WCAG и советом, как исправить. На наш сервер ничего не отправляется.

Что вы видите в результате

• Проблемы по влиянию: критические, серьёзные, умеренные и незначительные; сначала правило, которое встречается чаще всего.
• Критерий успеха каждой проблемы ссылкой, например 1.1.1 Нетекстовое содержимое, с уровнем (A или AA).
• Проблемные элементы: CSS-селектор и HTML каждого, чтобы найти его в коде.
• Как исправить из нашей библиотеки правил на языке этой страницы со ссылкой на полное объяснение.
• «Нужен взгляд человека»: случаи, в которых правило не смогло решить, например цвет на фоновом изображении. Проверьте их вручную.

Что остаётся на вашем компьютере

Браузер разбирает ваш HTML и показывает его в iframe с sandbox="allow-same-origin" и строгой политикой безопасности содержимого: ни один скрипт фрагмента не выполняется, формы не отправляются, а ссылки открываются в новой вкладке. По умолчанию предпросмотр не загружает изображения и стили с других сайтов; включите опцию, если фрагменту нужна внешняя таблица стилей. axe-core загружается с нашего сервера при первом нажатии кнопки, а проверка идёт в вашем браузере. Ваш код к нам не попадает.

Фрагмент или вся страница

Фрагмент не является страницей, поэтому правила о странице в целом (заголовок страницы, атрибут lang, ориентиры, заголовок первого уровня, ссылка «перейти к содержимому») для фрагментов выключены. Вставьте полный документ, начинающийся с <!doctype html> или <html>, и они тоже будут проверены. Опция «добавить правила лучших практик» добавляет советы, которых WCAG не требует; снимите её, чтобы видеть только проблемы WCAG.

Чего проверка вставленного HTML не найдёт

• Того, что страница добавляет позже. В исходном коде нет того, что скрипты построят потом. Скопируйте готовый HTML из инструментов разработчика («Copy outerHTML») или проверьте живой адрес в проверке WCAG.
• Стилей, которых вы не вставили. Контраст цветов, рамки фокуса и межстрочные отступы зависят от CSS. Цвета проверяйте в проверке контраста.
• Всего, что требует человека. Описывает ли альтернативный текст изображение, логичен ли порядок чтения, может ли пользователь клавиатуры оформить заказ, как страница звучит в программе экранного доступа. См. как тестировать WCAG.

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

Это не валидатор в понимании W3C

Валидатор синтаксиса HTML проверяет, соответствует ли разметка спецификации HTML. Этот инструмент проверяет правила доступности: кнопки без названия, изображения без альтернативного текста, поля форм без подписей, неверные атрибуты ARIA. Это разные вопросы: страница может быть валидным HTML и не пройти WCAG, и наоборот. В WCAG 2.2 критерия 4.1.1 «Синтаксический анализ» больше нет; сломанная разметка важна, когда ломает названия, роли или связи (4.1.2, 1.3.1).

Где это уместно

Используйте при написании компонента или проверке шаблона от клиента. Для живой страницы есть проверка WCAG, для страниц за логином — расширение для браузера. Другие инструменты сравниваются в обзоре инструментов тестирования доступности. Pandus запускает такие проверки на каждой странице вашего сайта каждую неделю и объясняет каждую проблему на языке владельца.

Частые вопросы

Отправляется ли мой код на сервер?

Нет. HTML показывается и проверяется в вашем браузере. С нашего сервера загружаются только сама страница и скрипт проверки; вставленный код никуда не отправляется.

Выполняет ли проверка скрипты из моего HTML?

Нет. Предпросмотр работает в изолированном фрейме без разрешения на скрипты, поэтому встроенные скрипты, обработчики событий и теги script ничего не делают. Содержимое, которое добавили бы скрипты, не проверяется.

По каким правилам идёт проверка?

По правилам axe-core для WCAG 2.0, 2.1 и 2.2 уровней A и AA, а также по правилам лучших практик, если оставить эту опцию. Находки объяснены нашими карточками правил.

Это валидатор W3C?

Нет. Он не проверяет синтаксис HTML, а проверяет правила доступности. Это другой вопрос.

Может ли инструмент подтвердить, что мой HTML соответствует WCAG или EAA?

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