Как сделать обзор доступности?

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

Начните с запуска автоматизированного инструментария

Многие проблемы с доступностью можно обнаружить, запустив страницу с помощью автоматизированных инструментов. Некоторые из автоматизированных инструментов включают WAVE, Tenon, Accessibility Insights, Google Lighthouse, Siteimprove и расширение проверки доступности Siteimprove для Chrome. Частично это можно автоматизировать с помощью axe-core. Эти инструменты помогут вам быстро выявить некоторые проблемы с доступностью, такие как неправильная структура разметки, отсутствующие атрибуты ARIA и недостаточный цветовой контраст.

Тестовая навигация с клавиатуры

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

Что искать

• Можете ли вы пропустить повторное содержание?

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

• Все ли элементы управления полностью работоспособны?

Каждый интерактивный элемент должен использоваться с клавиатурой. Разверните / сверните, древовидные представления и ползунки, диалоги и наложения - перетаскивание - все. Или должен быть альтернативный способ выполнить действие.

• Можете ли вы вкладывать в обоих направлениях?

Мы видели некоторые приложения, в которых работа с вкладками вперед по странице работала нормально, но было невозможно выполнить перемещение назад (используя комбинацию клавиш Shift + Tab), что создавало ловушку клавиатуры. Убедитесь, что вы можете использовать табуляцию через интерфейс в обоих направлениях.

• Есть ли клавиатурные ловушки?

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

• Ваш фокус ограничен, когда есть диалог?

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

• Ваш фокус всегда виден?

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

• Есть ли контент, который не виден, но доступен с клавиатуры?

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

• Существуют ли доступные для клавиатуры эквиваленты контента, видимого при зависании?

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

• Есть ли фокусируемые элементы, которые не должны быть фокусируемыми?

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

- Не помещайте атрибуты tabindex = "0" на элементы, если только пользователь не должен ими управлять.

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

• Является ли порядок вкладок естественным и логичным?

Если tabindex был изменен, или если макет страницы был реорганизован в соответствии с естественным потоком DOM (объектная модель документа или элементы, фактически записанные в скрипте на странице), то зрячий пользователь клавиатуры может испытать запутанный поток при навигации через страницу

Проверьте свои контрольные точки

После того, как вы выполнили все эти тесты клавиатуры: увеличивайте масштаб браузера, пока не достигнете контрольной точки, и сделайте все снова. Любой, кто использует высокий уровень масштабирования браузера, будет взаимодействовать с вашей «планшетной» или «телефонной» версией на своем ноутбуке. Мобильные контрольные точки не только для пользователей с сенсорным экраном.

Заголовки

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

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

Что искать

• Есть ли только один элемент H1 на странице?

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

• Соответствуют ли уровни заголовков содержанию?

Важно использовать другие заголовки в зависимости от их уровня, а не от размера шрифта. Важно не пропускать уровни заголовков.

• Достаточно ли описательны заголовки?

Хорошие заголовочные тексты кратко описывают содержание, следующее за заголовком.

Цвет и контраст

Должен быть достаточный цветовой контраст

Цветовой контраст - это соотношение цвета переднего плана (текста) и цвета фона. Текст должен иметь соотношение 4,5: 1 или больше с фоном. Вы можете использовать средство проверки контрастности цветов, чтобы определить, соответствуют ли ваши цвета этому требованию.

Цвет не должен быть единственным средством отображения визуальной информации

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

Если для передачи информации используется цвет, используйте по крайней мере один из следующих дополнительных методов:

• Используйте значимый текст для предоставления информации. Например, «вкл» и «выкл» рядом с кружком, который меняется с зеленого на красный.
• Используйте значащий значок, чтобы пользователи могли различать значение по форме.
• Чтобы указать ошибки формы, не просто говорите «поля, отмеченные красным». Лучше произносить названия полей и отмечать их значком распознаваемой ошибки.

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

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

Не только по иконке

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

Звук и видео

Если страница использует звук или видео для передачи информации, убедитесь, что подписи или стенограмма доступны. Дополнительная информация в статье WebAim о подписях, стенограммах и аудио описаниях

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

Это относится к Time-based Media, руководству 1.2 WCAG.

Анимация и автовоспроизведение видео и аудио

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

Примеры анимации, автозапуска видео и аудио:

• Анимации: карусель автоматически просматривает ряд изображений;
• Автозапуск видео: видео YouTube воспроизводится, как только страница загружена;
• Автозапуск аудио: радио-канал воспроизводится, как только страница загружена.

Чтобы уменьшить количество отвлекающих факторов на странице:

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

Динамически изменяющийся контент

JavaScript позволяет динамически изменять части страницы без полной ее перезагрузки. Пользователи, которые не могут в полной мере увидеть эти изменения, все равно должны знать, что они произошли. Примерами динамических изменений на странице являются обновление списка результатов поиска на лету или отображение отдельного уведомления, которое не требует взаимодействия с пользователем. API Drupal.announce () предоставляет возможность объявлять динамические изменения содержимого в некоторых вспомогательных технологиях.

Drupal.announce () - это API, построенный на основе ARIA live regions. Некоторые примеры использования для этого можно найти в этой документации о ролях ARIA live regions.

Лучший способ протестировать динамически изменяющийся контент - использовать программу чтения с экрана.

Тестирование с помощью программы чтения с экрана

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

Что искать

• У всех элементов управления есть метка?

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

• Есть ли какие-либо пользовательские элементы управления? Описаны ли они соответствующей ролью и какими-либо обязательными атрибутами ARIA, которые придают их состоянию?

Пользователи вспомогательных технологий должны иметь доступ к той же информации, которая передается зрячим пользователям через визуальные подсказки, такие как форматирование, стиль курсора или положение. Нативные элементы имеют эту семантическую информацию, встроенную в браузер, но для пользовательских элементов управления вам нужно использовать ARIA для добавления этой информации. Например, пользовательский компонент-слайдер может взять на себя роль ARIA-слайдера, который имеет некоторые связанные атрибуты ARIA: aria-valuenow, aria-valuemin и aria-valuemax.

• Соответствует ли поток информации тому, что вы видите на экране, и имеет ли это смысл?

Поток информации может быть изменен с помощью CSS. Имеет ли смысл и поток контента при доступе с помощью программы чтения с экрана?

• Имеют ли смысл тексты ссылок?

Большинство программ чтения с экрана говорят «ссылка» перед каждой ссылкой. Например, ссылка "продукты" будет. читать как "ссылка продуктов". Поэтому ссылки не должны включать «ссылку» в текст ссылки, потому что все пользователи уже знают, что это ссылка.

Переход от ссылки к ссылке - это способ просмотра веб-контента для пользователей программ чтения с экрана. Ссылки должны иметь смысл вне контекста. Такие фразы, как «нажмите здесь», «подробнее», «нажмите для получения подробной информации» и т. Д., Являются неоднозначными при чтении вне контекста.

• Все ли изображения имеют правильный альтернативный текст?

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

Ручное тестирование с помощью программы чтения с экрана

Некоторые проблемы могут быть обнаружены только путем ручного тестирования приложения с помощью программы чтения с экрана. Наиболее распространенными программами чтения с экрана являются VoiceOver (Mac OS) и NVDA (Windows). Чтобы начать работу с VoiceOver, вы можете посмотреть видео об основах VoiceOver и прочитать учебник WebAIM для VoiceOver. Чтобы начать работу с NVDA, вы можете посмотреть видео об основах NVDA и прочитать о том, как использовать NVDA и Firefox для тестирования ваших веб-страниц от Marco Zehe.

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

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