Перейти к содержанию
100% локально

Проверка доступности HTML

Сканируйте HTML-фрагмент на наличие проблем, которые мешают экранным дикторам и пользователям клавиатуры.

Входные данные
Выходные данные

Проверка доступности HTML

Вставьте HTML-фрагмент, и этот инструмент отсканирует его на предмет проблем, которые наиболее часто мешают экранным дикторам, пользователям клавиатуры и другим вспомогательным технологиям. Каждое обнаруженное проблема сообщается с номером строки и понятным объяснением, поэтому вы можете исправить ее без обращения к отдельному документу WCAG. Инструмент сканирует фрагмент, который у вас есть под рукой — компонент, шаблон письма, блок CMS — а не полную загруженную страницу.

Проверки — это параметры, которые можно включать и отключать отдельно: отсутствующий alt текст на изображениях (и пустой alt на изображениях, которые являются единственным содержимым ссылки или кнопки), уровни заголовков, которые пропускают уровень или не начинаются с h1, кнопки и ссылки без видимого текста или aria-label, поля формы без связанной метки, вспомогательный текст ссылки, таблицы без ячеек заголовков, документ без атрибута lang и дублирующиеся атрибуты id. Фильтр серьезности сужает список до предупреждений и ошибок или только ошибок.

Проверка читает только исходную разметку — теги и атрибуты, а не вычисленные стили или отображаемый макет — поэтому не будет обнаруживать проблемы контрастности или порядок фокуса, которые проявляются только после применения CSS (используйте для этого проверку контрастности). Анализ — это лучший результат: он допускает неправильный или неполный HTML вместо отказа в работе, поскольку вставленный фрагмент редко имеет закрывающий тег для всего.

Все происходит локально в вашем браузере. Фрагмент, который вы вставляете — который может поступать с невыпущенной страницы, внутреннего инструмента или проекта клиента — никогда не загружается и не отправляется на сервер. Скопируйте отчет, загрузите его как файл .txt или отправьте фрагмент обратно во входные данные после внесения изменений, чтобы переотсканировать его.

FAQ

Это заменяет полный аудит доступности?
Нет. Он обнаруживает распространенные механически выявляемые проблемы в разметке, которую вы вставляете — отсутствующий alt текст, порядок заголовков, неподписанные поля и т.д. — но полный аудит также включает контрастность цвета, порядок фокуса клавиатуры, тестирование с экранным дикторам и отображаемый макет, что требует реальной страницы для проверки.
Почему изображение с alt="" все еще иногда помечается как проблема?
Пустой alt правильно использовать для чисто декоративного изображения. Оно помечается как проблема только когда изображение является единственным содержимым ссылки или кнопки (оставляя этот элемент управления без доступного имени) или когда оно имеет непустой атрибут title, что указывает, что оно все же содержит информацию.
Что считается "дублирующимся id"?
Любое значение атрибута id, которое появляется в более чем одном элементе в фрагменте. Дублирующиеся id нарушают связи метки, ссылки aria-labelledby и внутристраничные ссылки, поскольку используется только первое совпадение.
Можно проверить только одну категорию проблем?
Да. Каждая проверка — изображения, заголовки, интерактивные элементы, формы, текст ссылки, таблицы, язык и дублирующиеся id — имеет собственный переключатель, и фильтр серьезности дополнительно сужает результаты.
Загружается ли мой HTML где-нибудь?
Нет. Фрагмент анализируется и проверяется полностью в вашем браузере с помощью JavaScript; он никогда не отправляется на сервер.