Тестирование доступности

Цель состоит в том, чтобы весь сайт документации EUI прошёл через axe. Со времени работы #2569 все страницы Руководства протестированы, и подготовлена инфраструктура для добавления остальных.

Что такое axe?

axe — это «движок доступности для автоматизированного тестирования веб-интерфейса пользователя». Автоматизированные тесты покрывают около 30% требований доступности, но около 60% ошибок доступности выявляется автоматизированными тестами. Таким образом, хотя оно не может заменить ручное тестирование, оно является отличной отправной точкой для всех наших компонентов.

Как запустить тесты?

• start-test-server-and-a11y-test запускает набор тестов для всего сайта документации и управляет собственным локальным сервером для него.
• test-a11y можно использовать, если вы хотите запустить его на своём сервере разработки (предполагается, что это `http://localhost:8030).

Как запустить его против одного компонента?

Хотя он не настроен для такого запуска, есть два способа сделать это.

Рекомендуемый способ — установить дополнение axe (для Chrome или Firefox). Перейдите на любую страницу и запустите анализатор из инструментов разработчика вашего браузера. Это даст вам те же результаты, а также предоставит некоторые удобные утилиты, такие как выделение конкретного элемента, который не работает.

Не такой приятный опыт, хотя потенциально более прямой, в scripts/a11y-testing.js вы можете изменить список страниц компонентов, возвращаемых из docsPages(), чтобы запустить только один файл. Но помните, что эти изменения не следует регистрировать!

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

Разбор сообщения об ошибке

`[${id}]: ${description}
  Help: ${helpURL}
  Elements:
    - ${nodePath}
`);

Все сообщения об ошибках имеют одинаковую структуру:

• Идентификатор всегда соответствует одному и тому же описанию и helpURL.
• Описание даёт одно предложение объяснения проблемы.
• HelpURL приведёт вас к документации axe об этой проблеме. Документация обычно довольно подробная и расскажет вам о различных возможных проблемах и шагах по их устранению.
• NodePath — единственное, что не поступает напрямую от axe, и это попытка привести вас к элементу, вызывающему ошибку. (См. printResult() в scripts/a11y-testing.js, чтобы узнать, как именно он генерируется.)

Набор сбоев для каждой страницы будет обозначен строкой с URL тестируемой страницы.