Создание доступных сайтов может быть настоящим испытанием для таких разработчиков как я. Для разработчиков, которые никогда не пользовались никакими ассистивными (позволяющими поддерживать функциональность и автономность людям с ограниченными возможностями) технологиями. В отличие от визуальных проблем (например, расположение блоков), легко фиксирующихся стандартным инструментом – глазом, проблемы доступности могут остаться незамеченными, если мы не имеем под рукой правильных инструментов для их тестирования.
Доступность не обязана сразу быть идеальной, она просто должна быть немного лучше, чем вчера.
– Леони Уотсон на FronteersConf
Есть несколько инструментов, которые я использую в процессе работы над доступностью. И т.к. мой основной браузер – Google Chrome, то и средства, представленные в данной статье, в большинстве своем так или иначе связаны с этой программой.
ACCESSIBILITY DEVELOPER TOOLS
Accessibility Developer Tools – расширение Хрома, созданное командой Google Accessibility. Это расширение добавляет дополнительную опцию на вкладку “Audits” инструмента разработчика, которая называется “Accessibility”.
Accessibility Audit протестирует страницу на основе заранее определенного чек-листа доступности. Результат будет представлять собой список, составленный из возможных ошибок доступности, которые требуют исправления, а также листинга тестов, проведенных на данной странице.
Кроме общего анализа страницы Accessibility Audit позволяет проводить тестирование отдельных элементов. Для этого нужно отметить интересующий вас элемент и перейти на вкладку “accessibility properties”, которая покажет список его свойств доступности.
ACCESSIBILITY INSPECTOR
В рамках внутреннего эксперимента Google добавили в Хром Accessibility Inspector. Найти его можно в панели инструментов разработчика. Правда по умолчанию он скрыт.
После активации Accessibility Inspector, в панели инспектора появится новая вкладка «Accessibility». Там вы также сможете посмотреть информацию по доступности каждого элемента. Однако в отличие от Accessibility Developer Tools, данный инструмент позволит увидеть нам более полную и информативную картину доступности, благодаря более широкому доступу к Accessibility API.
TENON
Tenon представляет собой чрезвычайно мощный инструмент для обнаружения ошибок по WCAG 2.0 и Section 508 на любой стадии проекта, от локальной разработки до продакшна. По сути Тенон это API с платным доступом, которое вы можете интегрировать в свой рабочий процесс для наблюдения за критериями доступности на каждом шаге разработки.
Также здесь есть возможность бесплатно протестировать любую страницу или даже небольшой кусочек кода.
CHROME VOX
Задача сделать веб-сайт оптимизированным для работы скринридера зачастую превращается в угадайку, ведь большинство разработчиков просто не пользуется этим инструментом доступности. Chrome Vox – это простейший скринридер для Google Chrome, который легко устанавливается через панель расширений.
Посмотрите демо его работы на сайте https://bitsofco.de
HIGH CONTRAST
High Contrast – расширение Гугл Хром, с помощью которого можно посмотреть как сайт выглядит в экстремально контрастных цветовых схемах. Это может помочь откалибровать цветовую гамму сайта, дабы сделать его более доступным для людей с искаженным цветовым восприятием.
ВАША КЛАВИАТУРА
И, наконец, один из самых простых и полезных способов проверки своего сайта на доступность – это тестирование навигации и юзабилити сайта без помощи мыши, используя только клавиатуру.
Перевод статьи: https://bitsofco.de/tools-for-developing-accessible-websites/
Еще по теме: http://prgssr.ru/development/dostupnye-komponenty-polzovatelskogo-interfejsa.html
Следить за обновлениями блога в: твиттере, фейсбуке, вконтакте