Полное руководство по инструментам доступности

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

АРИЯ

Опрос WebAIM Million показал, что на домашних страницах с ARIA в среднем на 41% больше выявляемых ошибок, чем на страницах без ARIA. ARIA — это важный инструмент для создания сложных веб-приложений, но его спецификация строга и может быть сложной для отладки тем, кто не использует вспомогательные технологии регулярно. Инструментарий может помочь нам убедиться, что мы используем ARIA правильно и не вносим больше ошибок в наши приложения.

Компания TPGi создала букмарклет WAI-ARIA, который сканирует вашу страницу, чтобы убедиться, что все элементы, заданные им роли и атрибуты ARIA действительны. После активации букмарклета страница сканируется на наличие ошибок, и открывается новая вкладка с результатами. Результаты включают общее количество допустимых ролей, любые обнаруженные ошибки ARIA и фрагменты кода, где были обнаружены ошибки, чтобы вы могли легко отлаживать свою страницу.

Одна вещь, которая явно не тестировалась в приведенном выше букмарклете, — это наличие повторяющихся ролей ARIA. Определенные роли ориентиров имеют имена, которые звучат так, как будто они могут применяться к нескольким элементам, но их следует использовать только один раз на странице, например banner или contentinfo информация. Адриан Роселли придумал простой букмарклет на основе CSS, чтобы проверить, не дублируются ли какие-либо из этих ролей ARIA. Активация букмарклета добавит красный контур любому элементу, нарушающему правила.

NerdeRegion — это расширение Chrome, которое регистрирует все выходные данные любых регионов aria-live. Не можете понять, почему программа чтения с экрана неожиданно что-то объявляет? NerdeRegion может позволить вам отслеживать объявления с временными метками и исходный элемент, из которого они исходят, и все это на панели в DevTools. Поскольку могут быть ошибки и несоответствия в том, как разные скринридеры объявляют регионы aria-live, NerdeRegion может быть отличным инструментом для выяснения того, потенциально ли проблема вызвана вашим кодом или комбинацией устройств.

Инструменты автоматического тестирования

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

Многие инструменты используют axe-core под капотом, поэтому использование комбинации инструментов может быть излишним. В конечном счете, какой инструмент вы выберете, больше зависит от того, какой пользовательский интерфейс вы предпочитаете, и от уровня полноты результатов. Например, Lighthouse, инструмент, встроенный в Google Chrome, использует частичный выбор правил axe-core, поэтому, если вам удастся получить чистое сканирование с помощью axe DevTools, вам также не нужно запускать сканирование Lighthouse.

Axe DevTools доступен как расширение Chrome или расширение Firefox и отображается в виде панели в инструментах разработчика. Вы можете протестировать всю страницу или только ее часть, и все обнаруженные проблемы отсортированы по степени серьезности и снабжены фрагментами кода для упрощения отладки. Axe также позволяет выявлять больше ошибок, чем другие автоматизированные инструменты, благодаря функции интеллектуальных пошаговых тестов. Интеллектуальные пошаговые тесты определяют области, которые необходимо протестировать, и выполняют максимально сложную работу, прежде чем задавать тестировщику вопросы для получения результата. Axe также позволяет сохранять и экспортировать результаты, что полезно для работы над исправлением ошибок в рамках более длительного и более совместного процесса разработки.

Accessibility Insights также работает на axe-core, но имеет несколько функций, которые отличают его от axe DevTools. Его можно запускать на различных платформах, включая Android, Windows или в виде расширения для браузера. Во всех версиях Accessibility Insights есть инструмент, похожий на инспектора, для поиска информации об отдельных элементах, а также способ запуска автоматических проверок. Веб-расширение также содержит функцию оценки, которая сочетает в себе автоматические, управляемые и ручные тесты, чтобы вы могли создать полный отчет.

WAVE от WebAIM был неотъемлемой частью моего набора инструментов. Доступный в виде расширения, а также службы массового тестирования и API, я считаю этот инструмент лучшим для проверки моей работы по мере разработки из-за его простоты и скорости. Все загружается в виде панели сбоку вашей страницы, и вы можете получить целостное представление об ошибках , прокручивая страницу. Если на боковой панели отображается ошибка, но вы не знаете, где она находится в DOM, вы можете отключить стили, чтобы найти ее в разметке. Функция заголовков и ориентиров WAVE — одна из моих любимых вещей, поскольку она гарантирует, что семантика моего документа будет правильной при создании.

У SiteImprove есть бесплатное расширение для Chrome в дополнение к их платным предложениям. Как и WAVE, вы запускаете расширение на странице, и оно перечисляет ошибки на панели сбоку страницы, включая фильтры для таких вещей, как уровень соответствия, серьезность и ответственность. Фильтр серьезности особенно полезен, поскольку автоматическое тестирование всегда имеет тенденцию давать ложные срабатывания.

Вы когда-нибудь задумывались об автоматизации тестов доступности исходного кода с помощью GitHub Actions? Неважно, если вы еще не освоились с GitHub Actions или вам просто нужна небольшая помощь в настройке правильного рабочего процесса, руководство Адриана Болонио для вас. В нем шаг за шагом показано, как автоматизировать тесты доступности с помощью таких библиотек, как axe, pa11y, Lighthouse и модульных тестов, непосредственно в вашем репозитории GitHub.

Вы узнаете, как настроить свой репозиторий, чтобы действия GitHub выполнялись, как только вы создаете или обновляете запрос на включение в основную ветку. Если какое-либо из действий GitHub обнаружит уязвимости доступности, запрос на вытягивание завершится с ошибкой и слияние будет отключено до тех пор, пока вы не устраните найденные ошибки. Маленькая деталь, которая имеет большое значение.

Цвета

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

Когда вы начинаете разрабатывать цветовую палитру, вам может пригодиться встроенный в браузер инструмент выбора цвета. Are My Colors Accessible — это инструмент, который может помочь вам определить доступную цветовую палитру. Базовый режим вычисляет коэффициент контрастности между любыми двумя цветами. Размер шрифта и вес шрифта вашего текста могут влиять на коэффициент контрастности, требуемый в зависимости от уровня соответствия, и этот инструмент удобно отображает все различные стандарты, которым он соответствует. Он также имеет ползунки диапазона HSL, так что вы можете настроить любой из цветов, при этом результаты автоматически обновляются по мере внесения изменений. Режим палитры позволяет сравнивать каждый цвет в палитре друг с другом и отображает коэффициент контрастности и соответствие стандартам, что полезно для определения того, как вы можете комбинировать разные цвета вместе. Внесение любых корректировок цвета также обновляет постоянную ссылку, позволяя вам легко делиться цветовыми комбинациями со своей командой. Если вы предпочитаете другой интерфейс для выбора цветов, Atul Varma создал аналогичный инструмент, который использует палитру цветов вместо ползунков диапазона HSL.

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

Некоторые инструменты могут помочь вам решить определенные проблемы доступности, связанные с цветом. Кнопки, в частности, могут быть сложными, так как вам не только нужно беспокоиться о цвете текста с цветом фона, вам также нужно учитывать фон кнопки с фоном страницы и цвет контура фокуса с обоими фонами. Проект ButtonBuddy Стефани Эклс объясняет эти требования простым языком и помогает вам выбрать цвета для этих отдельных частей.

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

Если вы хотите проверить свои цветовые комбинации в контексте существующего сайта, Stark — это расширение выбора цвета для Chrome, которое позволяет вам имитировать определенные виды дальтонизма. Кроме того, Анна Монус создала полезный обзор инструментов для дальтонизма, уже встроенных в Chrome. Хотя такая эмуляция никогда не сможет полностью заменить тестирование с реальными пользователями, она может помочь нам сделать лучший первоначальный выбор.

Иногда, как разработчики, мы начинаем работать над проектом, где нам может понадобиться разработать дизайн по мере продвижения и начать писать код без полной, заранее установленной палитры бренда. После начала разработки может быть утомительно постоянно импортировать цветовые палитры во внешние инструменты. Существует множество вариантов проверки цветового контраста в среде кода . Алекс Клэппертон разработал инструмент командной строки, в котором вы передаете два цвета, и он выводит коэффициент контрастности и стандарты прохождения прямо в терминале. BBC опубликовала средство проверки цветового контраста JavaScript, которое берет два цвета и определяет, соответствует ли он желаемому стандарту. Такой инструмент может жить в вашей кодовой базе с вашими тестами или быть реализован в вашей библиотеке системы проектирования, такой как Storybook, PatternLab и т. д.

A11y Color Tokens делает еще один шаг вперед и позволяет автоматически генерировать дополнительные цветовые токены в CSS или SASS. Вы передаете цвет и желаемое соотношение, чтобы создать оттенок или оттенок этого цвета, который соответствует требованиям. Если вам нужно быстро проверить коэффициент контрастности чего-либо, Chrome и Firefox теперь также отображают информацию о цветовом контрасте в соответствующих селекторах цвета инструментов разработчика. Если ни один из этих инструментов не подходит вам, Стефани Уолтер рассказала о многих других инструментах, связанных с цветом, в своем блоге о доступности цвета.

Совместимость

Создание вспомогательных технологий часто может добавить еще один уровень сложности, когда дело доходит до отладки. Поскольку вспомогательные технологии — это, по сути, еще один уровень интерфейса поверх браузера, теперь нам нужно заняться комбинациями браузера и вспомогательных технологий. Ошибка может присутствовать либо в браузере, либо во вспомогательных технологиях, либо она может присутствовать только в определенной комбинации. Рекомендуется держать этот список средств отслеживания ошибок под рукой, когда вы пытаетесь исправить конкретную проблему. Некоторые из них являются общедоступными, чтобы вы могли видеть, сталкиваются ли другие с вашей ошибкой, но другие предлагают только средства для сообщения об ошибках в частном порядке.

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

Документирование доступности

Доступность по-прежнему остается запоздалой мыслью во многих командах дизайнеров UX. Элиз Ливингстон и ее команда в Qualtrics предлагают простую, но очень эффективную стратегию, которая поможет вам принять образ мышления, связанный с доступностью. Они начали добавлять документы по доступности ко всем проектным документам, прежде чем передать их инженерам. Не только для улучшения доступности продукта, но и для выявления потенциальных проблем с доступностью на более ранних этапах процесса проектирования.

Elise предлагает решать документацию по специальным возможностям в два этапа: сначала определить поведение клавиатуры, а затем указать семантические метки, которые могут быть поняты вспомогательными технологиями. Если вы хотите попробовать, Элиза обобщила все, что вам нужно знать о подходе, в статье. Прекрасная возможность переосмыслить свой текущий процесс.

Управление фокусом

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

Этот букмарклет от Level Access помечает каждый доступный для фокуса элемент на странице, чтобы вы могли проверить, соответствует ли порядок фокуса порядку чтения. Для пользователей Firefox в Firefox Accessibility Inspector добавлена ​​эта функция, начиная с версии 84.

В сложных кодовых базах, где различные компоненты или сторонний код могут неожиданно перемещаться, этот небольшой фрагмент Скотта Винкля может помочь вам увидеть, какой элемент в настоящее время имеет фокус. Если я борюсь с перемещением фокуса другими частями моего приложения, иногда мне также нравится заменять console.log на console.trace , чтобы точно определить, какая функция перемещает фокус.

Чтобы протестировать все стили фокуса на веб-странице, мы можем использовать сценарий Скотта О'Хара в качестве отправной точки. Переход через каждый элемент через некоторое время может стать громоздким, поэтому скрипт для чередования каждого элемента может помочь нам убедиться, что наши стили фокуса выглядят согласованными и работают в контексте страницы.

Установка положительного tabindex, чтобы попытаться исправить порядок фокуса, является общей ошибкой доступности. Элементы с положительным tabindex заставят браузер сначала перейти к ним. Хотя технически это не может быть ошибкой, это часто бывает неожиданно и может вызвать больше проблем, чем решить. Букмарклет tabindex Пола Дж. Адама позволяет выделить все элементы, к которым применен атрибут tabindex.

Удобство использования макета

Порядок чтения документа иногда может не соответствовать тому, что может ожидать зритель, если макет слишком сильно зависит от свойства порядка CSS Grid или Flexbox. Адриан Роселли написал букмарклет для отслеживания порядка чтения, чтобы помочь вам убедиться, что ваш сайт соответствует правилам осмысленной последовательности.

WCAG содержит критерий интервала между текстом, при котором все содержимое должно по-прежнему работать при применении определенных настроек текста. Чтобы проверить это, Стив Фолкнер создал букмарклет, который автоматически применяет необходимые параметры интервала текста ко всему тексту на странице. Избегание таких вещей, как фиксированная высота и разрешение переполнения, не только делает ваш сайт более доступным, но и гарантирует, что любой контент, который вы размещаете на своем сайте, не нарушит макет, за что ваши редакторы контента будут вам благодарны.

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

Линтеры

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

Многие разработчики уже знают и используют ESLint в той или иной степени. Вместо того, чтобы изучать новые инструменты, можно начать тестирование доступности, включив новый плагин в существующий рабочий процесс. Eslint-plugin-jsx-a11y — это плагин ESLint для ваших элементов JSX, в котором будут отображаться любые ошибки по мере написания кода. Скотт Винкл написал полезное руководство по его настройке.

Deque выпустил axe Linter, доступный в виде приложения Github или расширения VS Code. Axe Linter проверяет файлы React, Vue, HTML и Markdown на соответствие основным правилам без какой-либо настройки, поэтому его легко запустить и запустить, хотя вы можете передать свои собственные параметры. Одна полезная функция заключается в том, что он различает WCAG 2 и WCAG 2.1, что полезно, если вы пытаетесь соответствовать определенному стандарту.

Разметка

Интернет создан, чтобы быть устойчивым. Если вы нарушили разметку, браузер постарается исправить любую ошибку. Однако это может иметь непреднамеренные побочные эффекты как с точки зрения стиля, так и с точки зрения доступности. Прогон вашего вывода через средство проверки HTML W3C может помочь обнаружить такие вещи, как неработающие теги, атрибуты, применяемые к элементам, которые не должны их иметь, и другие ошибки HTML. Deque создал букмарклет W3C HTML Validator на основе того же движка, который позволяет вам проверять разметку на локальных или защищенных паролем страницах, недоступных для обычного валидатора.

Если вы больше визуальный человек, проект Gael Poupard a11y.css представляет собой таблицу стилей, которая проверяет возможные риски в вашей разметке. Доступно как в формате расширения, так и в формате букмарклета, вы можете настроить язык, а также уровень отображаемых рекомендаций. Аналогичным образом, sa11y — это инструмент, который можно установить как букмарклет или интегрировать в вашу кодовую базу. Sa11y специально разработан для просмотра содержимого CMS . Он отображает любые предупреждения нетехническим языком, чтобы редакторы контента могли их понять и внести необходимые исправления.

Уровень чтения

Доступный сайт начинается с доступного контента. Когнитивная доступность была основным направлением текущего проекта WCAG 3 и в настоящее время упоминается в Критерии успеха 3.1.5, который предполагает, что авторы стремятся к тому, чтобы контент был понятен на уровне чтения младших классов средней школы (7-9 классы).

Редактор Hemingway вычисляет уровень чтения вашего контента, когда вы его пишете, чтобы вы могли отредактировать его, чтобы убедиться, что он легко понятен. На боковой панели предлагаются предложения о том, как вы можете улучшить свой контент, чтобы сделать его более читабельным. Если ваш сайт уже был опубликован, Juicy Studio разработала инструмент для обеспечения удобочитаемости, в котором вы передаете URL-адрес предоставленной форме, а содержимое вашего сайта анализируется и оценивается с использованием трех различных алгоритмов уровня чтения. Существует также полезное объяснение того, что влечет за собой каждый из этих показателей. Однако одним из ограничений этого конкретного инструмента является то, что он учитывает весь текст, отображаемый на странице, включая такие элементы, как навигация и текст нижнего колонтитула, что может исказить результаты.

Наборы тестов и непрерывная интеграция

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

Опять же, axe-core появляется как библиотека с открытым исходным кодом, которая часто лежит в основе большинства этих инструментов, поэтому, работает ли инструмент для вас, скорее всего, будет зависеть от того, насколько хорошо он интегрируется с вашим кодом, а не от каких-либо различий в результатах тестирования. . Марси Саттон опубликовала независимое от фреймворка руководство по началу написания автоматизированных тестов доступности. Она рассказывает о разнице между модульными тестами и интеграционными тестами и о том, почему вы можете предпочесть одно из них в разных сценариях.

Если у вас уже есть тестовая среда, которая вам нравится, есть большая вероятность, что уже есть библиотека, которая включает в себя axe-core . Например, Джош МакКлюр написал руководство, в котором используется кипарисовый топор, а Ник Колли выпустил версию со вкусом шутки на jest-axe.

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

Пользовательские настройки

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

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

Подведение итогов

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

Нужно еще больше инструментов? Проект A11y и Старк подготовили списки дополнительных инструментов доступности как для разработчиков, так и для пользователей! Или не стесняйтесь оставлять любые предложения в комментариях ниже, мы хотели бы услышать, какие инструменты вы используете в своем рабочем процессе.