Ваш сайт 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:
- Установите плагин ESLint для вашего редактора кода.
- Добавьте файл
.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.
- Установите библиотеку как зависимость разработки:
bash npm install --save-dev react-axe - Инициализируйте модуль в
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. Используйте eslint-plugin-jsx-a11y , чтобы добавить проверки доступности в рабочий процесс проверки. CRA уже включает его, но вы можете переключиться либо на рекомендуемый, либо на строгий режим.
В дополнение к локальному тестированию разработки включите в свое приложение react-axe чтобы выявить любые проблемы в окончательно отрисованном DOM. Не включайте его в свой производственный комплект.
Ваш сайт 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:
- Установите плагин ESLint для вашего редактора кода.
- Добавьте файл
.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.
- Установите библиотеку как зависимость разработки:
bash npm install --save-dev react-axe - Инициализируйте модуль в
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. Используйте eslint-plugin-jsx-a11y , чтобы добавить проверки доступности в рабочий процесс проверки. CRA уже включает его, но вы можете переключиться либо на рекомендуемый, либо на строгий режим.
В дополнение к локальному тестированию разработки включите в свое приложение react-axe чтобы выявить любые проблемы в окончательно отрисованном DOM. Не включайте его в свой производственный комплект.
Ваш сайт 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:
- Установите плагин ESLint для вашего редактора кода.
- Добавьте файл
.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.
- Установите библиотеку как зависимость разработки:
bash npm install --save-dev react-axe - Инициализируйте модуль в
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. Используйте eslint-plugin-jsx-a11y , чтобы добавить проверки доступности в рабочий процесс проверки. CRA уже включает его, но вы можете переключиться либо на рекомендуемый, либо на строгий режим.
В дополнение к локальному тестированию разработки включите в свое приложение react-axe чтобы выявить любые проблемы в окончательно отрисованном DOM. Не включайте его в свой производственный комплект.