Как сделать сайт доступнее: инструменты accessibility, которые вы можете внедрить прямо сейчас

При создании современных веб-сайтов разработчики фокусируются на сроках, дизайне и производительности, ставя доступность на второй план. Почему так происходит?

Помимо низкого приоритета, ситуацию усугубляет распространенный миф:

«Доступность нужна лишь небольшой группе людей»

Давайте сразу развеем это заблуждение. Проблемы с доступностью касаются не только людей с инвалидностью, но и:

• Пожилых пользователей; 
• Людей с временными травмами (например, со сломанной рукой); 
• Тех, кто пользуется сайтом в неидеальных условиях (яркое солнце или плохая погода).

Да, доступность нужна не только людям с инвалидностью, но важно помнить, что именно они наиболее уязвимы к проблемам цифровой доступности.

Анатолий ПопкоDigital accessibility consultant, adpopko.ru

К тому же, руководство WCAG многим кажется сложным и объёмным документом, что заставляет откладывать изучение.

В статье мы рассмотрим инструменты, которые помогут вам превратить сложные требования к доступности в понятные и автоматизируемые задачи.

Как люди с ограничениями жизнедеятельности пользуются цифровыми сервисами?

Прежде чем перейти к инструментам, давайте разберёмся, как именно пользователи с инвалидностью/ограничениями жизнедеятельности пользуются цифровыми сервисами.

Скринридеры (NVDA, VoiceOver, Orca)

Скринридер — это программа, которая с помощью синтеза речи или шрифта Брайля представляет пользователю содержимое экрана. Например, в случае шрифта Брайля — в форме рельефно-точечного шрифта.

Скринридер работает не с отрисованной страницей, а с деревом доступности, которое строится на основе семантической HTML-разметки. Чем семантичнее вёрстка, тем точнее скринридер представит контент пользователю.

Строго говоря, «скринридер» — это жаргонизм. В официальных русскоязычных документах (в частности, ГОСТ-Р 52872-2019) этот класс вспомогательного программного обеспечения называется «программа экранного доступа»

Анатолий ПопкоDigital accessibility consultant, adpopko.ru

Клавиатура

Для одних людей клавиатура — альтернатива мыши, которая является вопросом удобства и личных предпочтений, для других — вынужденная необходимость, например, для пользователей с различными нарушениями рук, которые физически не могут использовать мышь или сенсорную панель.

В этом случае пользователи полагаются на логичный порядок перемещения фокуса (клавиша Tab — переместиться вперёд, Shift+Tab — вернуться назад) и возможность управлять сложными компонентами (меню, слайдерами) с помощью стрелок и других клавиш.

Пример хорошей поддержки прямого клавиатурного управления можно найти в Web-версиях Яндекс Музыки и на Кинопоиске: в плеере нажатие клавиши k приостанавливает и возобновляет воспроизведение, а курсорные стрелки отвечают за перемотку и изменение громкости

Анатолий ПопкоDigital accessibility consultant, adpopko.ru

Увеличение экрана

Пользователи с ослабленным зрением используют целый набор инструментов для увеличения и настройки контента под свои нужды:

• Масштабирование страницы в браузере;
• Программы увеличения экрана;
• Коррекция цветовой палитры;
• Изменение внешнего вида указателей;
• Озвучивание текстовой информации при помощи синтезатора речи;
• Пользовательские стили со своими шрифтами и цветами.

Совет: Прежде чем браться за сложные инструменты, протестируйте интерфейс собственноручно: попробуйте пройтись по сайту только с помощью клавиатурного фокуса и проверьте, как он ведёт себя при масштабировании до 200%. Это даст вам понимание о ключевых проблемах с доступностью.

Теперь перейдём к инструментам, которые помогут автоматизировать ручные проверки.

Важно отметить: автоматизированные инструменты находят только 30-40% всех проблем цифровой доступности. ​​Отлично для начала, но дальше идеально — парное экспертное тестирование.

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

Анатолий ПопкоDigital accessibility consultant, adpopko.ru

Lighthouse (от Google)

Lighthouse — простой и популярный инструмент, встроенный прямо в Chrome.

Пример отчёта созданного в Lighthouse

Для запуска Lighthouse нужно:

• Открыть браузер;
• Открыть консоль разработчика (F12);
• Перейти во вкладку Lighthouse;
• Выбрать категорию Accessibility; 
• Нажать «Analyze page load».

Схожий функционал можно найти во всех основных браузерах:

• Firefox — Accessibility Inspector
• Safari — Audit
• Microsoft Edge — Accessibility Checker

После запуска Lighthouse соберёт отчёт с оценкой от 0 до 100 баллов и списком проверенных критериев, разделенных на три группы:

• Passed audits: что работает правильно;
• Opportunities: рекомендации по улучшению;
• Diagnostics: дополнительные советы, не влияющие напрямую на оценку.

Затем Lighthouse рассортирует проблемы по категориям:

• Навигация: доступность с клавиатуры, логичный порядок фокуса;
• ARIA: правильное использование ARIA-атрибутов;
• Цвет и контраст: достаточность контраста для слабовидящих;
• Семантика и структура: правильность HTML-разметки;
• Имена и метки: наличие описательных текстов для элементов форм и ссылок;
• Прочее: рекомендации согласно лучшим практикам.

Accessibility Insights (от Мicrosoft)

Accessibility Insights — это open source-инструмент от Microsoft выпущенный в 2019 году, который предлагает комплексное решение для поиска и устранения проблем.

Accessibility Insights плагин для Google Chrome

Accessibility Insights предоставляет два вида аудита:

• FastPass: быстрый аудит для ежедневного использования, который способен найти критические проблемы сайта за считанные минуты;
• Assessment: глубокий аудит на соответствие стандартам WCAG 2.1 Level AA предназначенный для тестировщика или разработчика.

Его ключевое преимущество — обучающие элементы. Он не просто находит ошибку, но и объясняет причину проблемы и как её исправить. Также он помогает удобно создавать тикеты в трекере (например, Jira), включая описание, рекомендации и стандарт WCAG.

Accessibility Insights — полноценная экосистема доступности. Отлично подходит для команд, которые хотят глубоко разобраться в теме и встроить a11y в процесс разработки.

WAVE

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

Инструмент доступен как веб-сервис и как браузерное расширение.

Пример визуальной оценки доступности при помощи WAVE

WAVE помечает элементы на странице цветными иконками:

• Красные (Errors): критические ошибки, которые с высокой вероятностью нарушают доступность.
• Желтые (Alerts): предупреждения о возможных проблемах, требующих ручной проверки.
• Зеленые (Features): подсвечивают элементы, которые реализованы правильно.
• Синие (Structural Elements): показывают структурные и семантические элементы HTML5.
• Иконки контрастности — показывают результаты проверки контраста текста и фона.

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

IBM Accessibility (от IBM)

IBM Accessibility — это не просто инструмент, а целая экосистема. Она включает в себя принципы, практики и инструменты для всех этапов жизненного цикла продукта — от проектирования до разработки и тестирования.

Экосистема IBM Accessibility

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

• Браузерные расширения для Chrome, Firefox, Edge;
• Пакеты для встраивания в CI/CD (Java, NPM и Cypress).

Accessibility Assessment плагин для Google Chrome

IBM Accessibility подойдёт крупным компаниям, желающим системно внедрить доступность на всех этапах работы — от проектирования и разработки до тестирования и поддержки.

Библиотеки компонентов

Готовые библиотеки с уже продуманной доступностью избавляют от необходимости реализовывать сложную логику управления фокусом и ARIA-атрибутами с нуля.

Обычно такие библиотеки содержат в себе:

• Набор headless-компонентов с правильным ролями и ARIA-атрибутами;
• Поддержку управления фокусом и навигацией через клавиатуру;
• Набор хуков для кастомной поддержки пользовательский действий.

Пример библиотек:

• Для React — Reakit, React Aria;
• Для Vue — Vuetify, Quasar, Vue Material;
• Для Angular — Angular Material.

A11y плагин для Storybook

Плагин автоматически проверяет ваши компоненты на доступность прямо в процессе разработки в Storybook. Он показывает ошибки и предупреждения в панели, мгновенно давая рекомендации по исправлению проблем.

Accessibility аддон для Storybook

A11y плагин для среды разработки

Интегрировать проверку доступности можно прямо в процесс написания кода. Это помогает отлавливать ошибки на самом раннем этапе. В больших компаниях такие плагины уже неотъемлемая часть процесса разработки.

Вот основные из них:

• React: eslint-plugin-jsx-a11y для React;
• Vue: eslint-plugin-vuejs-accessibility;
• Angular: Codelyzer и angular-eslint.

Заключение

Внедрение доступности — это непрерывный процесс, который можно и нужно автоматизировать. Существуют инструменты для любого уровня и задачи: от лёгких плагинов для визуальной проверки до комплексных экосистем.

Начать можно с малого, например, провести базовый аудит с помощью Lighthouse, протестировать навигацию с клавиатуры или попробовать воспользоваться сайтом с помощью скринридера. Затем постепенно внедрять автоматизацию проверок.

И главное: не забывайте тестировать доступность с реальными пользователями. Ни один автоматический инструмент не заменит обратной связи от человека.

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

Также можно посмотреть логи сессии, где использовались accessibility инструменты для доступа к сайту и увидеть, где именно возникали проблемы.

Под «логами» обычно понимают технические файлы, которые создаются автоматически и содержат технические сообщения.

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

Анатолий ПопкоDigital accessibility consultant, adpopko.ru

Но в этой статье мы сконцентрировались на инструментах и практиках, которые под силу применить любому разработчику, чтобы сделать свой сайт более доступным.