Тестирование веб-сайтов Drupal на доступность с помощью WCAG 2.1

Знаете ли вы, что каждый четвертый взрослый в США имеет инвалидность*? Это ошеломляющие 61 миллион человек, на которых могут повлиять недоступные веб-сайты.

Как разработчик Drupal, вы можете изменить ситуацию, обеспечив соответствие своего сайта Руководству по обеспечению доступности веб-контента (WCAG). В этом блоге мы рассмотрим ключевые функции и рекомендации по тестированию специальных возможностей WCAG 2.1 в Drupal, чтобы вы могли создавать веб-сайты, доступные для всех пользователей.

Что такое доступность (A11y)

Доступность означает, что веб-сайт может использоваться как можно большим количеством людей, особенно для людей с ограниченными возможностями. Что означает A11y? A11y просто относится к слову «Доступность», где 11 обозначает количество символов, присутствующих между «A» и «Y».

WCAG и его происхождение

WCAG расшифровывается как Руководство по доступности веб-контента. Он считается стандартизированным эталоном доступности веб-сайтов. Рекомендации WCAG, созданные Консорциумом World Wide Web (W3C), — это лучший и самый простой способ сделать ваш веб-сайт удобным для всех. Руководство WCAG строго соблюдается большинством государственных и медицинских организаций, чтобы гарантировать, что веб-сайт соблюдает законы о доступности (например, раздел 508).

Принципы WCAG

Есть четыре основных принципа доступности, если вы хотите принять соответствие WCAG. Они следуют аббревиатуре «POUR», которая расшифровывается как Perceivable, Operable, Understandable и Robust .

Воспринимаемый

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

Действующий

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

понятно

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

Крепкий

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

Почему вы должны соблюдать WCAG

Ниже приведены некоторые преимущества реализации WCAG.

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

Критерии успеха WCAG 2.0/2.1: наиболее широко применяемые

1. Каждое поле ввода на сайте имеет соответствующую метку
2. Декоративный контент реализован таким образом, что вспомогательные технологии могут его игнорировать. Например, декоративные изображения игнорируются программами чтения с экрана.
3. Субтитры предоставляются для всего предварительно записанного аудио/видео контента.
4. Для аудиоконтента предоставляется сурдоперевод.
5. Осмысленная последовательность контента, например, заголовки на любой странице расположены в последовательном порядке.
6. Пользователь может приостанавливать или останавливать звук или управлять громкостью звука независимо от общей громкости системы для автоматического воспроизведения видео.
7. Коэффициент контрастности текста и изображений текста составляет 4,5:1, а крупномасштабного текста и изображений — 3:1. Коэффициент контрастности не применяется к декоративному контенту, логотипу или торговой марке.
8. Низкий уровень фонового звука или его отсутствие. Предварительно записанное аудио/видео не содержит фонового шума.
9. Все функции контента доступны через интерфейс клавиатуры. Не будет ловушки ключевых слов.
10. Предоставление пользователям достаточного времени для прочтения и использования контента
11. Если контент основан на времени, пользователю разрешено либо приостановить, либо настроить ограничение по времени.
12. В случае любого быстро движущегося контента, такого как автомобильные карусели, пользователю будет предложено приостановить или остановить его.
13. Когда сеанс аутентифицированного пользователя истечет, пользователь сможет продолжить сеанс без потери данных после повторной аутентификации.
14. Названия страниц, заголовки и метки описывают тему веб-страницы.
15. Фокус клавиатуры хорошо виден и выделен
16. Компоненты, на которые можно направить фокус, получат фокус в том порядке, в котором они означают значение и удобство использования.
17. Каждый раздел веб-страницы сопровождается заголовком раздела.
18. За исключением декоративных изображений, все изображения имеют осмысленный альтернативный текст.
19. Аудио, видео, формы, раскрывающиеся меню, якорный текст, URL-адреса и замещающий текст доступны для клавиатуры и программы чтения с экрана.
20. Четкость содержимого адаптируется в соответствии с уровнем масштабирования страницы. Контент хорошо виден даже при максимальном увеличении
21. Меню верхнего и нижнего колонтитула с справочным контекстом должно быть доступно на всех страницах сайта.
22. Сайты имеют правильную реализацию состояний наведения и фокуса.

Программы чтения с экрана

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

• Платные продукты, такие как JAWS (Windows) и Dolphin Screen Reader (Windows).
• Бесплатное ПО, такое как NVDA (Windows), ChromeVox (Chrome) и Orca (Linux).
• Программное обеспечение, встроенное в ОС (операционная система), например VoiceOver (macOS, iPadOS, iOS), экранный диктор (Windows), ChromeVox (в Chrome OS) и TalkBack (Android).

Три уровня доступности

WCAG 2.1 имеет 3 уровня критериев успеха

• Уровень A: Соблюдены все 30 основных критериев успеха, определенных в WCAG 2.0. Как минимум, все веб-сайты должны соответствовать этому уровню соответствия.
• Уровень AA: соблюдены все критерии успеха уровня A и удовлетворены дополнительные 28 критериев успеха доступности. Этот уровень обеспечивает более широкий спектр доступности и часто является целью большинства команд разработчиков.
• Уровень AAA: веб-сайт должен соответствовать всем трем уровням критериев успеха, включая 28 дополнительных критериев успеха. Этот уровень обычно зарезервирован для специальных сайтов, таких как правительственные организации.

Большинство сайтов, совместимых с WCAG, широко попадают под критерии доступности уровня A или AA.

Тестирование доступности сайта Drupal

Ниже приведены шаги, необходимые для выполнения теста доступности для веб-сайта Drupal.

1. Запустите аудит Google Chrome Lighthouse и устраните отмеченные проблемы доступности.
2. Запустите аудит инструмента Wave
3. Проверьте фокус подсветки клавиатуры и порядок табуляции на странице вручную.
4. Проверьте страницу с помощью необходимого программного обеспечения для чтения с экрана. Например, VoiceOver
5. Проверка доступности сайта на всех разрешениях, таких как широкий рабочий стол, ноутбук, вкладка и мобильные устройства.
6. Проверьте код сайта, используя инструменты проверки W3C для разметки и CSS.
7. Проверьте цветовой контраст сайта, чтобы убедиться, что он соответствует стандартам (4:5:1), используя инструмент расширения Chrome, например Kontrast, или приложение, например Color Contrast Analyzer.

Как Drupal помогает достичь стандартов доступности

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

1. Создание специальных возможностей в Drupal

Цель команды разработчиков Drupal всегда состояла в том, чтобы создать платформу, которую сможет использовать как можно больше пользователей. При разработке базовой платформы Drupal соблюдаются требования Руководства по доступности веб-контента (WCAG) 2.1 уровня AA. Это указывает на то, что доступ к веб-сайтам Drupal может осуществляться с различными нарушениями, например, с нарушениями зрительной, слуховой, физической, вербальной, когнитивной и неврологической систем.

2. Специальные возможности по умолчанию

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

3. Drupal предоставляет плагины и модули для специальных возможностей

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

• Editoria11y Accessibility Checker: этот модуль проверяет веб-сайт на наличие проблем с доступностью и дает рекомендации по их устранению.
• Плагин доступности CKEditor: это дополнение улучшает доступность широко используемого текстового редактора для Drupal, CKEditor.
• Универсальный виджет специальных возможностей: этот модуль включает виджет специальных возможностей, который позволяет пользователям изменять размер текста веб-сайта, контрастность и другие параметры, связанные с доступностью.
• A11Y: Помощники форм: этот модуль помогает привести все веб-формы Drupal в соответствие со стандартами доступности.
• Блокировать роли ориентира ARIA: этот модуль добавляет дополнительные элементы в формы конфигурации блока, которые позволяют пользователям назначать блоку роль ориентира ARIA и/или метки ARIA.

4. Сильная поддержка доступности сообществом

Разработчики и дизайнеры, стремящиеся к доступности, составляют значительную часть сообщества Drupal. Усилия сообщества, направленные на то, чтобы сделать Drupal более доступным для людей с ограниченными возможностями, — это Drupal Accessibility Group. Группа предлагает рекомендации, инструменты и лучшие практики для разработки веб-сайтов Drupal, совместимых с ADA.

Использованная литература:

https://www.cdc.gov/ncbddd/disabilityandhealth/infographic-disability-impacts-all.html

Последние мысли

Drupal — это эффективная система управления контентом с открытым исходным кодом, которая предоставляет множество функций, инструментов и плагинов для улучшения доступности веб-сайта. Благодаря своей приверженности доступности и силе своего сообщества, ориентированного на доступность, Drupal является фантастической платформой для создания веб-сайтов, которые удобны в использовании и доступны для людей с ограниченными возможностями.
Я надеюсь, что эта статья даст вам необходимую информацию о тестировании доступности с помощью WCAG 2.1. Хотите создать доступный веб-сайт Drupal с нуля или хотите сделать свой текущий сайт более доступным? Мы бы хотели, чтобы это произошло! Давай поговорим!