Инструменты для разработки доступных сайтов

Инструменты для разработки доступных сайтов

Создание доступных сайтов может быть настоящим испытанием для таких разработчиков как я. Для разработчиков, которые никогда не пользовались никакими ассистивными (позволяющими поддерживать функциональность и автономность людям с ограниченными возможностями) технологиями. В отличие от визуальных проблем (например, расположение блоков), легко фиксирующихся стандартным инструментом – глазом, проблемы доступности могут остаться незамеченными, если мы не имеем под рукой правильных инструментов для их тестирования.

Доступность не обязана сразу быть идеальной, она просто должна быть немного лучше, чем вчера.
Леони Уотсон на FronteersConf

Есть несколько инструментов, которые я использую в процессе работы над доступностью. И т.к. мой основной браузер – Google Chrome, то и средства, представленные в данной статье, в большинстве своем так или иначе связаны с этой программой.

ACCESSIBILITY DEVELOPER TOOLS

Accessibility Developer Tools – расширение Хрома, созданное командой Google Accessibility. Это расширение добавляет дополнительную опцию на вкладку “Audits” инструмента разработчика, которая называется “Accessibility”.
Accessibility Developer Tools
Accessibility Audit протестирует страницу на основе заранее определенного чек-листа доступности. Результат будет представлять собой список, составленный из возможных ошибок доступности, которые требуют исправления, а также листинга тестов, проведенных на данной странице.
Accessibility Audit
Кроме общего анализа страницы Accessibility Audit позволяет проводить тестирование отдельных элементов. Для этого нужно отметить интересующий вас элемент и перейти на вкладку “accessibility properties”, которая покажет список его свойств доступности.
Accessibility Properties

ACCESSIBILITY INSPECTOR

В рамках внутреннего эксперимента Google добавили в Хром Accessibility Inspector. Найти его можно в панели инструментов разработчика. Правда по умолчанию он скрыт.
После активации Accessibility Inspector, в панели инспектора появится новая вкладка «Accessibility». Там вы также сможете посмотреть информацию по доступности каждого элемента. Однако в отличие от Accessibility Developer Tools, данный инструмент позволит увидеть нам более полную и информативную картину доступности, благодаря более широкому доступу к Accessibility API.
Accessibility Inspector

TENON

Tenon представляет собой чрезвычайно мощный инструмент для обнаружения ошибок по WCAG 2.0 и Section 508 на любой стадии проекта, от локальной разработки до продакшна. По сути Тенон это API с платным доступом, которое вы можете интегрировать в свой рабочий процесс для наблюдения за критериями доступности на каждом шаге разработки.
Также здесь есть возможность бесплатно протестировать любую страницу или даже небольшой кусочек кода.
Tenon

CHROME VOX

Задача сделать веб-сайт оптимизированным для работы скринридера зачастую превращается в угадайку, ведь большинство разработчиков просто не пользуется этим инструментом доступности. Chrome Vox – это простейший скринридер для Google Chrome, который легко устанавливается через панель расширений.
Посмотрите демо его работы на сайте https://bitsofco.de

HIGH CONTRAST

High Contrast – расширение Гугл Хром, с помощью которого можно посмотреть как сайт выглядит в экстремально контрастных цветовых схемах. Это может помочь откалибровать цветовую гамму сайта, дабы сделать его более доступным для людей с искаженным цветовым восприятием.
High Contrast

ВАША КЛАВИАТУРА

И, наконец, один из самых простых и полезных способов проверки своего сайта на доступность – это тестирование навигации и юзабилити сайта без помощи мыши, используя только клавиатуру.

Перевод статьи: https://bitsofco.de/tools-for-developing-accessible-websites/

Еще по теме: http://prgssr.ru/development/dostupnye-komponenty-polzovatelskogo-interfejsa.html

Следить за обновлениями блога в: твиттере, фейсбуке, вконтакте

Отставить комментарий

Ваш электронный адрес не будет опубликован.Обязательные для заполнения поля отмечены *