Axe - это механизм тестирования доступности для веб-сайтов и других пользовательских интерфейсов на основе HTML.

В чем разница между отличным приложением и отличным приложением? Доступность!

Мелочи имеют значение. Пользователи хотят перемещаться по вашему приложению с помощью клавиатуры, слепые пользователи тоже хотят читать ваш блог, а опытные пользователи хотят использовать ярлыки, такие как кнопка вкладки, для навигации.

Здесь вам пригодится библиотека тестирования Axe.

Философия библиотеки тестирования доступности Axe

Интернет может стать доступным, инклюзивным пространством только в том случае, если разработчики будут уполномочены брать на себя ответственность за тестирование доступности и доступные методы кодирования.

Автоматическое тестирование доступности - огромная экономия времени. Это не требует специальных знаний и позволяет командам сосредоточить экспертные ресурсы на наиболее важных вопросах доступности. К сожалению, большинство инструментов обеспечения доступности предназначены для работы на сайтах и ​​в приложениях, которые достигли конца процесса разработки, и они часто не дают четких или последовательных результатов, вызывая разочарование и задержки именно тогда, когда вы думали, что ваш продукт готов к отправке.

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

О Axe - Manifesto

  • Axe - проект с открытым исходным кодом.
  • Он возвращает ноль ложных срабатываний (несмотря на ошибки).
  • Он разработан для работы во всех современных браузерах и с любыми инструментами, фреймворками, библиотеками и средами, которые вы используете сегодня.
  • Его активно поддерживает Deque Systems, крупный поставщик специальных возможностей.
  • Он интегрируется с вашими существующими функциональными / приемочными автоматическими тестами.
  • Он автоматически определяет, какие правила запускать, в зависимости от контекста оценки.
  • Axe поддерживает фикстуры в памяти, статические фикстуры, интеграционные тесты и фреймы бесконечной глубины.
  • Axe легко настраивается.

Начало работы с React

Установите модуль с помощью NPM или пряжи.

НПМ:

npm install --save-dev react-axe

Пряжа:

yarn add react-axe

Инициализировать модуль

Вызов экспортируемой функции, передавая объекты React и ReactDOM, а также временную задержку в миллисекундах, которая будет наблюдаться между каждым изменением компонента и временем начала анализа.

const React = require('react');
const ReactDOM = require('react-dom');

if (process.env.NODE_ENV !== 'production') {
  const axe = require('react-axe');
  axe(React, ReactDOM, 1000);
}

Начало работы без фреймворка

Сначала установите пакет axe-core.

npm install axe-core --save-dev

Содержимое пакета API

Пакет ax-core API состоит из:

  • axe.js - файл JavaScript, который должен быть включен на ваш тестируемый веб-сайт (API)
  • axe.min.js - уменьшенная версия указанного выше файла

Включите файл JavaScript в каждый из ваших окон iframe в ваших фикстурах или тестовых системах.

<script src="node_modules/axe-core/axe.min.js"></script>

Теперь вставьте вызовы в каждую точку ваших тестов, где новый элемент пользовательского интерфейса становится видимым или открытым:

axe.run(function (err, results) {
  if (err) throw err;
    ok(results.violations.length === 0, 'Should be no accessibility issues');
    // complete the async call
    ...
});

Запустите модуль в своей среде разработки (как показано в приведенном выше коде), иначе ваше приложение будет использовать больше ресурсов, чем необходимо, в производственной среде. Вы можете использовать envify для этого, как показано в этом примере.

После инициализации модуль будет выводить информацию о дефектах доступности в консоль Chrome Devtools каждый раз при обновлении компонента.

Теперь, когда вы запустите приложение React, веб-консоль должна показать вам любые проблемы с доступностью, если таковые существуют.

Поддерживаемые браузеры

Ax-core API полностью поддерживает следующие браузеры:

  • Microsoft Edge v40 и выше
  • Google Chrome v42 и выше
  • Mozilla Firefox v38 и выше
  • Apple Safari v7 и выше
  • Internet Explorer версий 9, 10, 11

Поддержка означает, что мы будем исправлять ошибки и регулярно пытаться тестировать каждый браузер. Только Firefox, Chrome и Internet Explorer 11 в настоящее время тестируются для каждого запроса на вытягивание.

Поддержка JSDOM ограничена. Мы постараемся сделать все правила совместимыми с JSDOM, но там, где это невозможно, мы рекомендуем отключить эти правила. В настоящее время известно, что правило color-contrast не работает с JSDOM.

Мы можем поддерживать только среды, в которых функции либо поддерживаются изначально, либо правильно заполнены полифиллами. Мы не поддерживаем устаревшую реализацию v0 Shadow DOM.

Правила доступности

Полный список правил, запускаемых axe-core, можно найти в doc / rule-descriptions.md.

Заключение

Убедитесь, что ваше приложение доступно всем пользователям. Так много людей, каждый со своими потребностями. Чем больше потребностей вы сможете удовлетворить, тем выше будет посещаемость. Воспользуйтесь любым преимуществом, которое вы можете.

Спасибо за чтение, удачного кодирования!