Веб-доступность — одна из наиболее важных, но наименее рассматриваемых тем веб-разработчиками.
Веб-доступность – что это?
Практика проектирования и создания веб-сайтов и цифровых инструментов таким образом, чтобы пользователи с различными способностями могли без труда их использовать, известна как веб-доступность.
Сложность и динамичный характер веб-приложений породили новый набор функций и проблем доступности. HTML получил множество семантических дополнений, в том числе main и section. Семантический HTML придает веб-странице значительный смысл, а не концентрируется исключительно на представлении. В результате пользователям, веб-браузерам, поисковым системам, программам чтения с экрана и программам чтения RSS становится легче это понять.
Инструменты для специальных возможностей в приложениях React.
Существует множество доступных инструментов, которые могут помочь разработчикам создавать более доступные веб-приложения из-за размера и постоянного роста экосистемы React.
Хотя вы можете использовать эти инструменты для поиска некоторых распространенных проблем со специальными возможностями, они не завершат работу за вас. Вы как разработчик несете ответственность за то, чтобы с самого начала проекта прилагать согласованные усилия для создания более инклюзивных и доступных цифровых продуктов.
1. eslint-plugin-jsx-a11y
Этот плагин запускает статический анализ JSX, чтобы найти проблемы доступности в приложениях React. Поскольку он находит ошибки только в статическом коде, используйте его в сочетании с @axe-core/react, чтобы проверить доступность визуализированного DOM. Всегда тестируйте свои приложения на устройствах, которые могут их использовать, и рассматривайте использование этих инструментов как всего лишь один шаг в более широком процессе тестирования.
Если вы используете подключаемый модуль редактора linting, вы можете сразу убедиться, что вы строго придерживаетесь некоторых стандартов доступности с пониманием в реальном времени. Для этого плагина включены 33 тестируемых правила, включая label-has-for и alt-text.
В приложении Create-react-app этот инструмент уже настроен, когда вы используете его для создания проекта React, но по умолчанию в нем включены только некоторые настраиваемые правила доступности. Вы можете включить дополнительные правила, создав файл .eslintrc.
2. топор-ядро-реакция
Когда компонент обновляется в консоли Chrome DevTools, разрабатываемый проект React может использовать axe-core-react, чтобы выделить проблемы доступности.
Вы можете использовать плагин axe-core-react с настройками по умолчанию или с дополнительными параметрами.
3. реакция ария-модаль
Это полностью функциональная и адаптируемая модальная модель React, созданная с использованием WAI-ARIA Authoring Practices.
Поскольку эта модальная библиотека соответствует стандартам веб-доступности, команда React предлагает использовать ее. Чтобы программы чтения с экрана могли получить доступ к вашему модальному экрану, он управляет фокусом клавиатуры, сопоставлением клавиш и ролями ARIA.
4. Проверка цветового контраста Web AIM
В Руководстве по обеспечению доступности веб-контента указано, что обычный текст для уровня AA должен иметь коэффициент цветовой контрастности 4,5:1. Чтобы текст считался уровнем AAA, коэффициент контрастности должен быть 7:1.
5. Гугл ЛайтХаус
Вы можете провести аудит доступности своего веб-сайта с помощью Google Lighthouse Chrome DevTools. Он создает отчет, который вы можете использовать для исправления недостатков вашего сайта.
Завершение
Спасибо, что прочитали это! В этом подробном руководстве по инструментам доступности в React мы рассмотрели различные методологии, с помощью которых вы можете сделать свое приложение React доступным для всех.
Следуйте за мной, Adarsh gupta на Medium, а также в Twitter (@Adarsh____gupta).
Если хочешь, можешь поддержать меня, купив мне чай.
Создавайте приложения с повторно используемыми компонентами, такими как Lego.
Инструмент с открытым исходным кодом Bit помогает более чем 250 000 разработчиков создавать приложения с компонентами.
Превратите любой пользовательский интерфейс, функцию или страницу в компонент многократного использования — и поделитесь им со своими приложениями. Легче сотрудничать и строить быстрее.
Разделите приложения на компоненты, чтобы упростить разработку приложений, и наслаждайтесь наилучшими возможностями для рабочих процессов, которые вы хотите:
