Перевод подготовила Ксения Блэйк.
Итак, вы просмотрели руководство по доступности, ознакомились с каждым пунктом, с рекомендациями и предупреждениями W3C. Но главный вопрос так и остался открытым: как же все-таки понять, соответствует ли ваш веб-ресурс стандартам WCAG 2.1 на 100 процентов или нет? Существуют ли автоматические программы тестирования, которые при использовании выдадут все подсказки об ошибках, способствующие решению данной проблемы?
Есть несколько бесплатных программ, позволяющих просканировать веб-сайт и выявить некоторые дефекты.
Однако важно помнить, что любые утилиты, предназначенные для автоматического тестирования, стоит использовать прежде чем начнется всеобъемлющее тестирование продукта с привлечением пользователей, или будет задействован технический отдел для проведения процедуры контроля качества.
Говоря об инструментах тестирования доступности, мы имеем в виду дополнения или расширения для браузеров, которые позволят открыть веб-страницу, нажать некую кнопку на панели инструментов и запустить проверку. Через несколько секунд на экране появится список найденных проблем со ссылками на статьи, содержащими рекомендации по их исправлению.
Подробное описание автоматических инструментов тестирования на доступность.
Прежде, чем мы перейдем к описанию непосредственно инструментов, давайте рассмотрим наиболее часто встречающиеся дефекты, которые можно определить при помощи расширений браузера:
- Недостаточная цифровая контрастность.
- Отсутствие альтернативного текста для графических изображений.
- Пустые заголовки.
- Использование текстового или графического заполнителя вместо элемента или метки HTML.
- Отсутствие меток в полях заполнения форм, например: в форме для подписки на новости.
Инструменты для тестирования делятся на две категории:
А) Дополнения для браузеров. Именно о них и пойдет речь в данной статье.
Б) Инструменты, управляемые при помощи консоли Windows.
Применяя дополнения на практике, важно понимать, что автоматические инструменты тестирования способны выявить только 30% от всех возможных дефектов доступности, поэтому их используют лишь на начальном этапе. Для полного соответствия стандартам доступности необходимо делать полный отчет, а также интегрировать стратегию системы комплексного мониторинга Доступности в рабочий процесс.
Wave
Wave – это самая известная утилита автоматического тестирования для браузера Chrome. Именно ее чаще всего рекомендуют включить в набор инструментов для веб-разработчика. Wave может функционировать как через собственный сайт, где в поле «Ссылка» вводится адрес страницы для тестирования, так и через расширение для Chrome. Если же у вас много веб-страниц, которым требуется проверка на доступность, то лучше использовать именно расширение, поскольку оно лучше поддерживает динамический и зашифрованный контент.
После сканирования на веб-странице появляется дополнительная визуальная оболочка, которая содержит иконки, указывающие на тип ошибок, такие как: структурные элементы, ссылки, отсутствие цветовой контрастности. Нажав на одну из иконок, можно прочитать рекомендации по исправлению, узнать, какую категорию людей с ограничениями жизнедеятельности затрагивает тот или иной дефект, и просмотреть ссылки на критерии доступности WCAG 2.1. Фрагмент кода, на который ссылается расширение, можно увидеть во всплывающей панели внизу экрана.
Считается, что Wave является одной из самых быстрых программ автоматизации, которая очень помогает отладить процесс тестирования на доступность. Еще одно преимущество в том, что она служит своего рода образовательным ресурсом для пользователей, разработчиков и тестировщиков.
Tenon
Это полномасштабный сервис автоматического тестирования на доступность, который существует в двух версиях – платной и бесплатной. У него также имеется дополнение к браузерам. Он полноправно заслужил быть в пятерке лучших дополнений тестирования.
- Данный инструмент способен выявлять и предопределять наиболее возможные сценарии, приводящие к критическим ошибкам.
- Это уникальный и очень гибкий инструмент для разработчиков, дизайнеров и блогеров.
- Расширение автоматически генерирует подробный отчет с фрагментами кода об ошибках и ссылках на руководство по доступности.
- Данная утилита способна предупреждать о возможных ошибках на ранней стадии тестирования, предотвращая их перерастание в критические дефекты, которые негативно влияют на пользовательский опыт.
Более того, Tenon имеет гибкий API, через который его можно интегрировать в различные среды разработки, такие как CMS и программы развертывания бета-версий (IDE).
Google Lighthouse
С помощью этой встроенной утилиты в браузер Chrome также можно проверить веб-сайт на доступность. Вот её основные возможности:
- Наличие открытого исходного кода (Open source);
- Наличие автоматически сгенерированного отчета об ошибках. Основное внимание при тестировании обращается на не промаркированные кнопки, картинки без альтернативного текста и заголовки страниц;
- Легкость в использовании;
- Google lighthouse является частью панели разработчика браузера Chrome, которая запускается через вкладку «Аудиты», нажатием кнопки «Сгенерировать отчет» а затем «Начать аудит»;
- Отчет об ошибке можно сохранить в формат JSON, открыть онлайн и отслеживать процесс исправления.
- Кроме доступности в Light House можно настроить такие параметры, как: производительность и оптимизация поисковых систем (SEO).
Axe
Этот инструмент автоматического сканирования существует в виде дополнения для браузера, которое запускается из панели разработчика в отдельной вкладке. В ней же появляется список всех дефектов, обнаруженных во время сканирования, которые можно открыть и подробно изучить, нажав на соответствующую ссылку. Вот почему ее включили в пятерку лучших:
- Это библиотека с открытым исходным кодом.
- Расширение можно быстро подстроить под нужды пользователя. В него можно добавить свои правила и интегрировать в frameworks и браузер по умолчанию, хотя последнее время упор делается на Chrome. Axe в своем отчете не только указывает на типичные ошибки доступности, но и на недочёты связанные с пользовательским интерфейсом.
Siteimprove
Должны признаться, что именно это дополнение занимает первую строчку нашего рейтинга. И вот почему:
Дополнение дает четкие рекомендации, описывая конкретные действия. Как можно сделать определенный элемент доступным, разделяя ошибки на категории: дефекты, связанные с доступностью или пользовательским интерфейсом, а также, указывает на категорию лиц с ограничениями жизнедеятельности, с которой соотносятся те или иные ошибки. И все это происходит в Chrome – нашем любимом браузере.
Заключение
Несмотря на огромное количество различных инструментов автоматического тестирования веб-ресурсов на доступность, они не должны быть пределом оценки качества доступности как таковой. Нужны компетентные разработчики, способные грамотно интерпретировать отчеты об ошибках и анализировать области, которые остаются незамеченными, такие как:
- Совпадение текста HTML меток с его семантическим значением;
- Правильное расположение и описание инструкций на полях заполнения форм;
- Структурная иерархия заголовков.
Все это невозможно выполнить без участия специалистов.
Оригинал статьи: What Are Some of the Best Web Accessibility Testing Tools to Evaluate Your Website With? Top 5 Chrome Extensions