Красный тест axe
Что делаем: подключаем axe-core: он проверяет страницу по готовым правилам, и мы пишем всего один тест.
Что такое axe
axe-core — библиотека, которая обходит страницу и ищет типовые нарушения доступности: поля без подписей, картинки без alt, низкий контраст, дубли id, ссылки без названия. Правила основаны на WCAG, ARIA и HTML Standard, поэтому ваши догадки заменяет проверенный список.
Тест вызывает и ждёт, что список нарушений пуст. Чтобы отчёт был понятным, превращаем каждое нарушение в короткую строку: правило и его описание.
Что покажет отчёт
Красная рамка с одним нарушением: link-name: Links must have discernible text. Ссылка на Телеграм состоит из одной иконки, и у неё нет текста. Глаз видит значок, а диктору сказать нечего: он прочтёт просто «ссылка».
Исправим это в следующем уроке.
Что axe не умеет
Он не знает, осмысленный ли текст на странице, и не проверит порядок Tab. Автоматика находит лишь часть проблем доступности, поэтому чек-лист из первого урока остаётся нужным.
Источники
- axe-core: правила: список правил и их описания.
- WCAG 2.2, назначение ссылки: откуда взято требование к тексту ссылки.