Axe — это механизм тестирования доступности веб-сайтов и других пользовательских интерфейсов на основе HTML. Он быстрый, безопасный, легкий и создан для полной интеграции с любой существующей тестовой средой, поэтому вы можете автоматизировать тестирование доступности наряду с обычным функциональным тестированием.
Подпишитесь на новости Axe, чтобы получать последние новости о функциях Axe, будущих выпусках и событиях.
В Axe-core есть разные типы правил: для WCAG 2.0, 2.1, 2.2 на уровне A, AA и AAA, а также ряд лучших практик, которые помогут вам определить общие методы обеспечения доступности, такие как обеспечение каждой страницы заголовка h1
, и помочь вы избегаете «ошибок» в ARIA, например, когда используемый вами атрибут ARIA будет игнорироваться. Полный список правил, сгруппированных по уровням WCAG и лучшим практикам, можно найти в doc/rule-descriptions.md.
С помощью axe-core вы можете автоматически обнаружить в среднем 57% проблем WCAG . Кроме того, axe-core будет возвращать элементы как «неполные», если Axe-core не может быть уверен и требуется проверка вручную.
Чтобы обнаружить ошибки на ранних этапах цикла разработки, мы рекомендуем использовать расширение axe-linter vscode. Чтобы еще больше улучшить охват тестами, мы рекомендуем интеллектуальные управляемые тесты в расширении axe Extension.
Сначала скачайте пакет:
npm install axe-core --save-dev
Теперь включите файл javascript в каждый из ваших iframe в ваших приборах или тестовых системах:
< script src =" node_modules/axe-core/axe.min.js " > script >
Теперь вставляйте вызовы в каждую точку ваших тестов, где новая часть пользовательского интерфейса становится видимой или открытой:
axe
. run ( )
. then ( results => {
if ( results . violations . length ) {
throw new Error ( 'Accessibility issues found' ) ;
}
} )
. catch ( err => {
console . error ( 'Something bad happened:' , err . message ) ;
} ) ;
Интернет может стать доступным и инклюзивным пространством только в том случае, если разработчики получат возможность взять на себя ответственность за тестирование доступности и доступные методы кодирования.
Автоматизированное тестирование доступности значительно экономит время, не требует специальных знаний и позволяет командам сосредоточить экспертные ресурсы на вопросах доступности, которые действительно в них нуждаются. К сожалению, большинство инструментов обеспечения специальных возможностей предназначены для запуска на сайтах и в приложениях, которые достигли конца процесса разработки и часто не дают четких или последовательных результатов, вызывая разочарование и задержки именно тогда, когда вы думали, что ваш продукт готов к выпуску.
Axe был создан, чтобы отразить, как на самом деле работает веб-разработка. Он работает со всеми современными браузерами, инструментами и средами тестирования, которые может использовать команда разработчиков. С помощью Axe тестирование доступности можно проводить как часть модульного тестирования, интеграционного тестирования, тестирования браузера и любого другого функционального тестирования, которое ваша команда уже выполняет изо дня в день. Включение тестирования доступности в ранний процесс разработки экономит время, ресурсы и устраняет всевозможные разочарования.
API axe-core полностью поддерживает следующие браузеры:
Поддержка означает, что мы будем исправлять ошибки и пытаться регулярно тестировать каждый браузер. В настоящее время только Chrome и Firefox тестируются по каждому запросу на включение.
Поддержка JSDOM ограничена. Мы постараемся сделать все правила совместимыми с JSDOM, но если это невозможно, мы рекомендуем отключить эти правила. В настоящее время известно, что правило color-contrast
не работает с JSDOM.
Мы можем поддерживать только те среды, в которых функции либо поддерживаются изначально, либо корректно заполняются полифилами. Мы не поддерживаем устаревшую реализацию Shadow DOM v0.
Пакет API axe-core состоит из:
axe.js
— файл JavaScript, который должен быть включен в тестируемый веб-сайт (API).axe.min.js
— уменьшенная версия вышеуказанного файла. Axe может быть создан с использованием вашего местного языка. Для этого файл локализации необходимо добавить в каталог ./locales
. Этот файл должен быть назван следующим образом:
. Чтобы собрать ax с использованием этой локали, вместо стандартной, запустите ax с флагом --lang
, например:
grunt build --lang=nl
или эквивалентно:
npm run build -- --lang=nl
Это создаст новую сборку для axe под названием axe.
и axe.
. Если вы хотите собрать все локализованные версии, просто укажите --all-lang
. Если вы хотите создать несколько локализованных версий (но не все), вы можете передать список языков, разделенных запятыми, флагу --lang
, например --lang=nl,ja
.
Чтобы создать новый перевод для axe, начните с запуска grunt translate --lang=
. В каталоге ./locales
будет создан файл json с английским текстом по умолчанию, который вы сможете перевести. Альтернативно вы можете скопировать ./locales/_template.json
. Мы приветствуем любую локализацию Axe-Core. Подробную информацию о том, как внести свой вклад, см. в разделе «Вклад» ниже. Подробную информацию о синтаксисе сообщения см. в разделе Проверка шаблона сообщения.
Чтобы обновить существующий файл перевода, повторно запустите grunt translate --lang=
. При этом будут добавлены новые сообщения, используемые на английском языке, и удалены сообщения, которые не использовались на английском языке.
Кроме того, локаль можно применить во время выполнения, передав объект locale
в axe.configure()
. Объект локали должен иметь ту же форму, что и существующие локали в каталоге ./locales
. Например:
axe . configure ( {
locale : {
lang : 'de' ,
rules : {
accesskeys : {
help : 'Der Wert des accesskey-Attributes muss einzigartig sein.'
}
// ...
} ,
checks : {
abstractrole : {
fail : 'Abstrakte ARIA-Rollen dürfen nicht direkt verwendet werden.'
} ,
'aria-errormessage' : {
// Note: doT (https://github.com/olado/dot) templates are supported here.
fail : 'Der Wert der aria-errormessage ${data.values}` muss eine Technik verwenden, um die Message anzukündigen (z. B., aria-live, aria-describedby, role=alert, etc.).'
}
// ...
}
}
} ) ;
Axe-core поддерживает следующие локали. Обратите внимание: поскольку локали предоставляются нашим сообществом, они не гарантируют, что они включат все переводы, необходимые в выпуск.
Каждые 3–5 месяцев Axe-core выпускает новую второстепенную версию, в которой обычно вводятся новые правила и функции. Мы рекомендуем запланировать время для обновления до этих версий. Обновления безопасности будут доступны для второстепенных версий, выпущенных до 18 месяцев .
DEQUE, DEQUELABS, AXE® и AXE-CORE® являются товарными знаками компании Deque Systems, Inc. Использование товарных знаков Deque должно осуществляться в соответствии с политикой Deque в отношении товарных знаков.
Полный список поддерживаемых ролей и атрибутов ARIA по топорам см. в разделе Поддержка ARIA в Axe-core.
Прочтите руководство по предложению правил Axe-core.
Прочтите документацию по архитектуре
Прочтите документацию по участию
Список проектов, использующих axe-core
Спасибо Марату Дулину за реализацию css-selector-parser, которая включена для поддержки теневого DOM. Еще одно спасибо разработчикам Slick Parser за их вклад: мы использовали некоторые из их алгоритмов в нашем коде поддержки теневого DOM. Спасибо Лее Веру и Крису Лилли за их библиотеку colorjs.io, которую мы использовали для преобразования между цветовыми форматами.
Axe-core распространяется под лицензией Mozilla Public License версии 2.0. Он поставляется в комплекте с несколькими зависимостями, которые распространяются на своих условиях. (См. LICENSE-3RD-PARTY.txt)