Итак, теперь мы знаем, что такое доступность и почему она важна. Но как мы можем узнать текущее состояние доступности в нашем приложении? Какие инструменты мы можем использовать и как с ними работать?
В моем предыдущем блоге я упоминал о тестировании нашего приложения с помощью ручного тестирования или, лучше сказать, инструментов самооценки, которые мы можем использовать. В этом блоге я расскажу вам о некоторых из лучших инструментов, которые мы использовали и которые помогли нам предсказать текущее состояние доступности в Primero.
Инструмент IBM Accessibility
Это плагин динамической оценки, который помогает нам узнать текущее состояние доступности в нашем приложении. Вы можете добавить расширение для Chrome и использовать его с помощью инструментов разработчика. Он сканирует веб-приложения, выявляет проблемы доступности и рекомендует возможные исправления, чтобы вы понимали, как исправить нарушения.
Функции:
- Предоставляет оценки доступности в режиме реального времени, передовые практики и доступные примеры кода
- Сообщает о каждом типе проблем с доступностью - нарушениях, потенциальных нарушениях, рекомендациях и тех, которые следует проверять вручную.
- Выявляет нарушения доступности прямо в исходном коде
- Обеспечивает соответствие веб-приложений Руководству по обеспечению доступности веб-контента версии 2.0 AA.
Как это использовать?
- Добавьте расширение из chrome, а затем используйте его через инструменты разработчика.
- Чтобы проверить доступность страницы, перейдите по URL-адресу, который вы хотите проверить, и нажмите вкладку «Оценка доступности».
- Появится такая страница, нажмите Сканировать, после чего вы сможете создать отчет.
2. Маяк
Lighthouse - это автоматизированный инструмент с открытым исходным кодом для улучшения качества веб-страниц. Вы можете запустить его на любой веб-странице, публичной или требующей аутентификации.
Функции:
- Lighthouse стремится предоставить руководство, которое актуально и полезно для всех веб-разработчиков.
- Он проводит аудит производительности, доступности, прогрессивных веб-приложений, SEO и многого другого.
Как это использовать?
- Запускаем Lighthouse в DevTools
- Чтобы создать отчет, перейдите по URL-адресу, который вы хотите протестировать, нажмите на маяк в DevTools в Google Chrome и нажмите Создать отчет.
3. Axe-Accessiblity Tool
Axe DevTools интегрируется в существующие инструменты разработки, поэтому вашей команде не нужно беспокоиться о работе с новой платформой. Тестирование доступности просто станет частью вашего процесса разработки.
Функции:
- Axe DevTools не имеет внешних зависимостей и работает без доступа и отправки данных на сервер, сохраняя ваши тесты в безопасной среде, не влияя на производительность.
- Axe DevTools легок и прост в использовании.
Как это использовать?
- Добавьте расширение из chrome, а затем используйте его через инструменты разработчика.
- Чтобы проверить доступность страницы, перейдите по URL-адресу, который вы хотите проверить, и нажмите вкладку `axe`.
- Появится такая страница, нажмите Анализ, после чего вы сможете создать отчет.
4. pa11y
Pa11y - еще один важный инструмент, который мы использовали в нашем приложении. Pa11y - важный инструмент, поскольку с его помощью вы можете тестировать свое приложение как в производственном, так и в режиме разработки. Предположим, у вас есть приложение, в котором вы можете переходить к следующим страницам после входа в систему. В таком случае, как вы будете тестировать приложение? Итак, у pa11y есть уникальная функция, с помощью которой мы можем передавать учетные данные в качестве действий для тестирования приложения. В противном случае мы также можем протестировать его после глобальной установки pa11y. Здесь я покажу вам, как использовать это в производственном режиме.
Как пользоваться :
Установите pa11y глобально, используя npm install -g pa11y
После установки вы можете протестировать любой сайт в терминале с помощью pa11y <URL>
Пример:
Итак, это одни из лучших инструментов, которые вы можете использовать для проверки доступности вашего развернутого веб-сайта. Но как передавать действия с pa11y и как использовать другие инструменты в среде разработки. Что ж, мой следующий блог будет посвящен этому, где я проведу вас через тестирование приложения в режиме разработки. Хлопайте, если вам понравился блог, и свяжитесь со мной здесь. Если у вас есть предложения, прокомментируйте. Спасибо :)