Аудит доступности с помощью React-axe и eslint-plugin-jsx-a11y, Аудит доступности с помощью React-axe и eslint-plugin-jsx-a11y, Аудит доступности с помощью React-axe и eslint-plugin-jsx-a11y

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

react-axe — это библиотека, которая проверяет приложение React и регистрирует любые проблемы с доступом в консоли Chrome DevTools. Он использует библиотеку тестирования ax с открытым исходным кодом, чтобы отмечать любые проблемы и их серьезность.

eslint-plugin-jsx-a11y — это плагин ESLint, который определяет и обеспечивает соблюдение ряда правил доступности непосредственно в вашем JSX. При использовании в сочетании с инструментом, который тестирует окончательный отрисованный DOM, например, react-axe , вы можете обнаружить и устранить любые проблемы с доступностью на вашем сайте.

Почему это полезно?

Крайне важно создавать веб-сайты, доступные для всех пользователей, включая людей с ограниченными возможностями. Используя библиотеку аудита доступности, такую ​​как react-axe и eslint-plugin-jsx-a11y , вы можете обнаружить проблемы с доступностью во время создания приложения и исправить их перед запуском в производство.

Используйте eslint-plugin-jsx-a11y

React уже поддерживает запись доступных HTML-элементов в синтаксисе JSX. Например, используйте атрибут htmlFor вместо for чтобы добавить метку к элементу формы внутри компонента React.

<input id="promo" type="checkbox">
<label htmlFor="promo">Receive promotional offers?</label>

Документация по специальным возможностям React описывает нюансы решения проблем доступности в компоненте React. Чтобы легче обнаружить эти проблемы, Create React App (CRA) включает плагин eslint-plugin-jsx-a11y .

Чтобы включить предварительно настроенный линтинг, предоставляемый CRA:

  1. Установите плагин ESLint для вашего редактора кода.
  2. Добавьте файл .eslintrc.json в свой проект.
{
  "extends": "react-app"
}

После настройки можно обнаружить распространенные проблемы доступности.

Предупреждение о доступности изображения в линтере

Чтобы проверить наличие дополнительных правил доступности, измените .eslintrc.json , включив в него все рекомендуемые правила плагина:

{
  "extends": ["react-app", "plugin:jsx-a11y/recommended"]
}

Для еще более строгого подмножества правил переключитесь в строгий режим:

{
  "extends": ["react-app", "plugin:jsx-a11y/strict"]
}

Ошибка доступности метки в линтере

В проектной документации представлена ​​информация о различиях рекомендуемого и строгого режима.

Используйте реактивный топор

eslint-plugin-jsx-a11y может помочь вам обнаружить любые проблемы с доступностью в вашем JSX, но он не проверяет окончательный вывод HTML. Библиотека react-axe проводит тестирование, добавляя оболочку React вокруг инструмента тестирования axe-core от Deque Labs.

  1. Установите библиотеку как зависимость разработки: bash npm install --save-dev react-axe
  2. Инициализируйте модуль в index.js : js if (process.env.NODE_ENV !== 'production') { import('react-axe').then(axe => { axe.default(React, ReactDOM, 1000); ReactDOM.render(<App />, document.getElementById('root')); }); } else { ReactDOM.render(<App />, document.getElementById('root')); }

Динамический импорт загружает библиотеку, пока она не находится в рабочей среде, перед рендерингом и загрузкой корневого компонента App . Это гарантирует, что он не будет включен в окончательный производственный комплект, если в нем нет необходимости.

Когда вы запускаете приложение во время разработки, проблемы отображаются непосредственно в консоли Chrome DevTools.

React Axe в Chrome DevTools

Для каждого нарушения также присваивается уровень серьезности. Эти уровни:

  • Незначительный
  • Умеренный
  • Серьезный
  • Критический

Заключение

Включите проверки доступности на ранних этапах рабочего процесса, чтобы выявить проблемы при создании приложений React. Используйте eslint-plugin-jsx-a11y , чтобы добавить проверки доступности в рабочий процесс проверки. CRA уже включает его, но вы можете переключиться либо на рекомендуемый, либо на строгий режим.

В дополнение к локальному тестированию разработки включите в свое приложение react-axe чтобы выявить любые проблемы в окончательно отрисованном DOM. Не включайте его в свой производственный комплект.