Создание веб-сайта для людей с ограниченными возможностями может быть трудным для новичков. Мы решили собрать широкий спектр инструментов проверки страниц, от одноразовых вкладок до полноценных приложений.
ARIA
Проект WebAIM Million ежегодно анализирует доступность людей с ограниченными возможностями к основным страницам миллионов ведущих веб-сайтов. Исследование, проведенное в рамках этого проекта, показало, что страницы, использующие ARIA, выявляют на 41% больше ошибок, чем страницы без ARIA.
ARIA незаменима для создания сложных веб-приложений, но сложность исправления, исправления и исправления ошибок может стать препятствием для тех, кто не использует вспомогательные технологии регулярно. Однако есть инструменты, которые помогут вам правильно использовать ARIA и во избежание дополнительных ошибок в ваших приложениях.
TPGi создала вкладку WAI-ARIA, которая сканирует роли различных элементов страницы, проверяет их совместимость с атрибутами ARIA. После активации вкладки открывается новая вкладка с результатами сканирования страницы. В результатах вы увидите общее количество правильных ролей, обнаруженных ошибок, фрагментов кода, в которых были обнаружены эти ошибки, чтобы вы могли быстро и легко исправить их.
NerdeRegion – это расширение браузера Chrome, которое записывает вывод всех динамических регионов (ARIA Live Regions). NerdeRegion позволяет отслеживать эти временные метки и их родительский элемент в инструментах разработчика. Поскольку разные программы чтения с экрана могут иметь разные ошибки согласованности, связанные с ARIA Live Regions, этот инструмент может оказаться большим подспорьем в выяснении причины проблемы.
Инструменты автоматизированного тестирования
Автоматизированные тесты вывода кода позволяют тестировщикам и разработчикам выявлять ошибки, которые могут остаться незамеченными в исходном коде. Однако эти инструменты автоматического тестирования – хорошее начало.
Axe DevTools распространяется как расширение для браузеров Chrome и Firefox. После установки на панели инструментов разработчика появляется отдельная вкладка. Вы можете проверить всю страницу или ее часть. Эта функция определяет автоматизированные тестовые площадки, проверяет их на наличие ошибок, а затем задает программисту некоторые контрольные вопросы тестирования.
Идеи обеспечения доступности, такие как Axe DevTools, используют библиотеку Axe, но некоторые функции делают ее отличной от предыдущего инструмента. Этот сервис работает на различных платформах, включая Android, Windows, а также в качестве расширения для браузера. Все версии идей доступности содержат своего рода исследователя, который позволяет находить информацию о конкретном материале и запускать автоматическую проверку.
Сервис WAVE WebAIM является неотъемлемой частью инструментария. Он доступен как расширение для браузера, сервис массового тестирования API. Простота и скорость сделали эту услугу популярной. Вся информация загружается в боковую панель, которая отображает полную картину обнаруженных ошибок.
Цвета
В прошлом году ошибки с низким контрастом текста были обнаружены на 86,4% домашних страниц. Разработчики очень редко влияют на уже согласованную цветовую палитру сайта, поэтому можно спросить о наличии цвета в начале разработки.
Встроенный инструмент выбора может быть полезен при выборе цветовой палитры сайта. Один из них – Are My Colors Accessible. В базовом режиме инструмент вычисляет уровень контраста между двумя цветами. Размер шрифта и вес влияют на контраст и требования к доступности. Этот инструмент отображает информацию обо всех стандартах, которым соответствует определенный шрифт. Используйте слайды «цвет-насыщенность-освещение», чтобы настроить любой цвет и отслеживать изменения в результатах в реальном времени. Режим палитры позволяет комбинировать все цвета палитры между собой и проверять сочетания по уровням контрастности.
Для каждой добавляемой вами группы цветов сервис Geenes создает диапазон цветов, позволяя вам разработать полную цветовую с истему, а не ограниченную палитру. Помимо информации об уровне контрастности, этот инструмент позволяет применять прикладную систему к разным макетам и для моделирования различных типов неспособности различать цвета.
Бывает, что работа над проектом начинается без единой палитры. Когда разработка активирована, постоянный импорт палитр в среду разработки может раздражать. В этом случае есть инструменты, позволяющие протестировать контраст в среде разработки. CLI – это инструмент, который передает информацию об обоих цветах, а на выходе терминала вы получаете данные о соответствии.
Совместимость
Создание веб-сайта, использующего вспомогательные технологии, часто усложняет процесс обнаружения или устранения ошибок. Поскольку специальные возможности – это всего лишь еще один уровень интерфейса браузера, вам необходимо убедиться, что различные комбинации вспомогательных технологий браузера работают должным образом. Ошибка может закрасться в работу определенного браузера, конкретной технологии или их комбинации.
Не все браузеры и программы чтения с экрана работают хорошо; не все специальные возможности одинаково доступны для всех браузеров. Существуют инструменты, позволяющие проверить, связана ли ошибка с определенной комбинацией устройств. HTML5 Специальные возможности – это список актуальных функций HTML и в какой степени они доступны для людей с ограниченными возможностями с использованием настроек браузера по умолчанию.
Управление внимания
В сложных приложениях для поиска доступа управление вниманием сложно, но необходимо. Вам нужно убедиться, что порядок фокусировки логичен, что фокус направлен правильно на всех компонентах, что каждый интерактивный элемент легко отделить от всей массы.
Удобство использования макета
Иногда порядок чтения документа может не соответствовать ожиданиям читателя, если макет сильно зависит от настраиваемой природы flexbox или CSS.
WCAG (Руководство по доступности веб-контента) требует стандарта расстояния между текстовыми элементами, в соответствии с которым контент должен отображаться правильно, даже если применяются определенные настройки для интертекста. Если вы не устанавливаете фиксированную высоту и вы не используете функцию переполнения, она не только увеличивает доступность вашего сайта, но также гарантирует, что макет страницы останется нетронутым.
Инструменты контроля качества кода
Этот класс инструментов предназначен для сканирования исходного пароля перед запуском приложения с ошибкой. С их помощью можно записывать небольшие ошибки до выполнения кода, что экономит драгоценное время квалифицированных инженеров.
Многие разработчики более или менее знакомы с ESLint. Вместо того, чтобы изучать новые услуги, вы можете расширить то, что вы уже знаете, с помощью новых надстроек, которые позволят вам протестировать свой сайт. Eslint-plugin-jsx-a11y – это плагин ESLint для элементов JSX, который показывает ошибки при написании кода.
Вы также можете найти полезным инструмент sa11y, который можно вставить в виде вкладки или интегрировать в исходный код. Этот инструмент, специально разработанный для вывода контента из CMS, отображает предупреждения на простом языке.
Читабельность:
Доступный веб-сайт начинается с доступного контента. Информированная доступность стала основным направлением предстоящего стандарта WCAG 3.
Если ваш сайт уже доступен для всех, воспользуйтесь функцией проверки читаемости Juicy Studio. Вам нужно поместить URL-адрес страницы в оценку ожидание анализа и с использованием трех разных алгоритмов для определения читабельности. Вы также найдете полезные объяснения для каждого типа оценки.
Набор тестов и непрерывная интеграция:
Обратной стороной многих инструментов автоматического тестирования является то, что они по-прежнему требуют, чтобы люди работали в браузере. Если вы работаете с одной большой базой данных, вы можете включить тест доступности в существующий процесс тестирования, как часть текущего процесса интеграции.
Pa11y – это инструмент с настраиваемым интерфейсом. Он также доступен в версии CI. Многочисленные варианты конфигурации позволяют решать широкий спектр тестовых задач.
Предпочтения пользователей:
Существует множество запросов, которые помогают определить настройки браузера пользователя в операционной системе. Разработчики часто используют эту информацию для установки настроек по умолчанию, таких как режим движения или темный режим. Однако это может привести к множеству ошибок, которые трудно воспроизвести, если на вашем устройстве нет этих настроек.
Magica11y позволяет вам проверить, какие настройки есть у вашего пользователя. Вы можете отправить страницу документации тестировщикам без какой-либо технической подготовки или встроить ее в свое приложение, чтобы максимально точно воспроизвести пользовательский интерфейс.
Подводя итоги
Тест доступности оценивает только 30% ошибок вспомогательных технологий. Несмотря на постоянное совершенствование инструментов, они никогда не заменят участие людей с ограниченными возможностями в разработке и тестировании вашего сайта. Весь процесс доступности включает вовлечение всей команды в поиск ошибок на ранних этапах разработки, вместо того, чтобы оставлять обнаружение ошибок, процесс ввода тестерам и реальным пользователям
