Как выполнить аудит доступности для соответствия WCAG

Опубликовано: 2022-06-28

WCAG (рекомендации по доступности веб-контента) был создан консорциумом всемирной паутины (W3C) и является наиболее признанным во всем мире стандартом доступности.

В этой статье мы описываем задачи, необходимые для проведения аудита для проверки соответствия стандарту WCAG 2.1.

Доступность — это обеспечение доступа к контенту и функциям вашего веб-сайта более широкой аудитории.

Например:

Временный барьер доступности – Кто-то потерял очки!
Проблемы с устройством — они связаны с устройством, которое имеет ограничения, например, мобильный телефон.
Ситуативные — яркий солнечный свет, темная комната и т. д.
Постоянная инвалидность — отсутствие зрения, слуха, когнитивные проблемы и т. д.
Проблемы с пропускной способностью — очень медленное соединение

Как видите, существует множество форм инвалидности, которые вам необходимо учитывать.

Рекомендации WCAG разбиты на следующие части:

Прежде чем переходить к каждому разделу, вот список того, что вам нужно для проведения тестирования:

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

Выбор браузеров, включая только текст (например, Lynx)
Инструмент для проверки альтернативных тегов, заголовков и т. д. (например, ScreamingFrog)
Программа чтения с экрана, например NVDA
Инструмент проверки доступности веб-сайта
Инструменты разработки Chrome
Доступ к выбору устройств

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

Инструмент доступности WAVE — один из многих инструментов, которые можно использовать для поиска проблем в этой области:

В приведенном выше примере страница работает достаточно хорошо. Он имеет только 1 ошибку и 5 ошибок с проблемами цветового контраста.

Единственная ошибка в том, что на этой странице не указан язык.

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

Давайте пройдемся по руководящим принципам и критериям успеха.

Руководство 1.1. Предоставление текстовых альтернатив нетекстовому содержимому

Существуют ли текстовые альтернативы нетекстовому контенту?

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

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

Когда вы используете HTML, вы автоматически получаете управление клавиатурой, фокус и т. д., и это предпочтение, но ARIA можно использовать в качестве резервной копии.

Что такое АРИЯ?

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

Описательные изображения

Описательный образ — это то, что изображает что-то значимое. Например, изображение автомобиля Toyota Prius.

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

На таких платформах, как WordPress, вы можете добавить тег alt при загрузке изображения:

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

Screaming Frog проанализирует все изображения на вашем веб-сайте и покажет, какие изображения не имеют тегов alt, дублируют теги alt, слишком длинные теги alt или слишком короткие теги alt!

Вы также можете увидеть изображения вместе с деталями изображения:

Декоративное изображение

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

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

Вот пример изображения, описанного в качестве фонового изображения на веб-сайте My Emergency Doctor в Австралии:

Вот код, стоящий за этим:

Поскольку это изображение не указано как <img>, оно использует role=img, чтобы программы чтения с экрана знали, что это изображение. Он использует «метку Aria», чтобы дать хорошее точное описание изображения. Он также определяет изображение как «фоновое изображение».

Примечание. Если вы используете тег 'img' для фонового изображения, вам необходимо определить нулевой тег alt, например, alt=” “

Когда следует использовать <img> вместо background-color?

Если изображение является важной частью контента, используйте <img>. Например, если у вас есть изображение продукта, это <img>. У вас также могут быть изображения, которые являются просто фоновыми изображениями, используемыми для украшения, и нет смысла описывать их как изображения (которые будут проиндексированы Google).

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

Примечание. <img> — это тег HTML, а background-image — это стиль CSS, который вы используете.

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

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

Например, кнопка или форма управления.

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

Используя ARIA, вы можете определить «роль = кнопка», но в стандартном HTML вы можете использовать тег <button>. Какой из них вы должны использовать?

Вот пример кнопки, в которой есть только X, что требует от нас создания «метки-арии», чтобы описать, что делает кнопка.

<button aria-label="Закрыть" onclick="myDialog.close()">X</button>

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

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

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

<label for="lname">Фамилия:</label><br>

</форма>

Примечание: для форм вы также должны убедиться:

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

Капча

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

Мы рассмотрим реализацию и внесем соответствующие предложения.

Мультимедийный контент

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

Ссылки

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

Руководство 1.2 – Медиа на основе времени

Эта область касается обслуживания видео- и аудиоконтента, который необходимо сделать более доступным.

Доступна ли расшифровка только для предварительно записанного аудио или только для видео ?

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

Совет по транскрипции!

Rev.com — отличный сервис для создания титров/транскрипций для ваших аудио/видео. Они даже предоставляют услугу живых субтитров для видео Zoom.

Доступны ли субтитры для предварительно записанного аудио?

Заголовок — это текст, который появляется в видео, чтобы информировать пользователя о том, что говорит человек.

Есть ли аудиоописание или альтернативный медиафайл (предварительно записанный) ?

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

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

Вот пример транскрипции, которая включает звуковое описание.

Это отлично подходит для посетителей вашего сайта, но также хорошо для SEO!

Совет по выбору доступного проигрывателя:

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

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

Есть ли субтитры для живого аудио ?

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

Доступны инструменты для автоматического добавления субтитров к вашему живому видео и аудио.

Есть ли звуковое описание для предварительно записанного синхронизированного мультимедиа?

Это для медиа, которые содержат видео и аудио. Нам нужна звуковая информация, которая сопровождает медиа.

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

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

Существует ли логическая структура контента и легко ли понять взаимосвязь с каждым фрагментом контента в этой структуре?

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

Вот что вам нужно проверить:

Контент разбит на подзаголовки?
Используются ли списки, таблицы и т. д., когда это уместно?
Используется ли правильный HTML для других структурных элементов контента?
Используются ли метки и замещающий текст по мере необходимости (например, в формах?)

Кончик

Хорошей отправной точкой является проверка вашего веб-сайта с помощью валидатора, который проверяет правильность html (например, валидатор html W3.org).

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

Чтобы решить эту проблему, слово «обязательно» также добавляется к метке для фамилии, которая является обязательным полем.

 <label for="lastname" class="required">Фамилия (обязательно): </label>
<input type="text" size="25" value=""/>
<тип стиля="текст/CSS">
  .требуется {
    красный цвет;
  }
</стиль>

Есть ли порядок контента, который имеет смысл?

Когда вы просматриваете веб-страницу, вы увидите панель навигации, затем некоторый контент, заголовки, подзаголовки, абзацы текста. Вы хотите убедиться, что это представлено в порядке, который имеет смысл.
Используйте стили заголовков, чтобы указать важность разделов. Обычно у вас есть только один стиль <h1> для идентификации страницы контента, а затем у вас может быть несколько H2, H3 и т. д.
Отделите навигацию от содержимого (например, определите навигацию с помощью <nav>).
Используйте действительный HTML-код

Вот типичная структура заголовков, которые имеют смысл:

Могут ли пользователи понять контент, если они не могут воспринимать форму, размер или использовать информацию о пространственной форме или размере?

Проще всего объяснить это на примере:

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

Хорошо ли работает сайт в портретном и ландшафтном режимах?

Веб-сайт должен иметь возможность адаптироваться к портретному или ландшафтному режиму без потери смысла.

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

Правильно ли описаны входы в формы?

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

И если есть возможность, включите автозаполнение, чтобы пользователю не приходилось все заполнять!

Можно ли определить назначение элементов на странице программно?

Примером этого является использование элемента «роль» ARIA для разделов веб-сайта.

Например, баннер, содержащий логотип/название компании и т. д., может быть описан как «роль=баннер».

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

Вот как вы увидите это в HTML:

<тип ввода=”электронная почта>

Есть ли текстовая версия любого графика?

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

2. Работает

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

Руководство 2.1 – Доступность с клавиатуры

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

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

Все ли доступно через клавиатуру?

Настало время перестать использовать мышь и использовать только клавиатуру.

Вы проверяете:

Все следует логическому порядку вперед или назад (используя вкладку для перехода вперед и Shift Tab для возврата назад).

Когда вы находитесь на определенной кнопке, разделе и т. д., вы видите, что этот элемент выделен? В следующем примере очевидно, что мы перешли на «статьи».

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

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

Можно ли пропустить заголовок?

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

Когда вы нажимаете вкладку при первом посещении веб-сайта ниже, вы переходите по ссылке «Перейти к содержимому». Если вы нажмете Enter, вы перейдете прямо к содержимому.

Если вы нажмете вторую вкладку, вы перейдете к ссылке «Перейти к навигации». Если вы нажмете Enter, вы попадете в навигацию.

Если вы снова нажмете вкладку, вы перейдете к «пропустить навигацию». Если вы выберете это, вы сразу перейдете к навигации.

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

2.1.2 Бывают ли ситуации, когда вы заходите в тупик с клавиатурой (клавиатурная ловушка) ?

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

Это известно как ловушка клавиатуры. Как поется в песне… попал в ловушку, не могу оглянуться….

Есть ли альтернатива сочетанию клавиш, реализованному с помощью буквы?

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

Поэтому нам нужно предоставить альтернативу.

а) Возможность переназначить этого персонажа на другой ярлык

б). Выключи это

в). Он активен только тогда, когда вы сфокусированы на этом. Это означает, что если вы используете ярлык, ничего не происходит, если вы на самом деле не используете его!

Руководящий принцип 2.2 – Достаточно времени

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

Время регулируется?

Отключение времени идеально, но возможность продлить его (т. е. когда лимит времени почти достигнут) или настроить его на новое время — это нормально.

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

Если он движется/мигает или дергается, и он:

а). запускается автоматически

б). длится более 5 секунд

в). представлен параллельно с другим контентом

Затем есть механизм для паузы, остановки или удаления.

Та же проблема с автообновлением контента.

Руководство 2.3 – Судороги и физические реакции

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

Соответствуют ли «вспышки» на экране рекомендациям?

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

Руководящий принцип 2.4 – Судоходный

Это делается для облегчения навигации по сайту.

Можно ли пропускать повторяющиеся блоки?

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

Все ли страницы правильно названы?

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

Вы можете использовать Screaming Frog для просмотра заголовков страниц в одном месте:

Сохраняет ли порядок фокуса значение?

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

Можно ли определить цель ссылки по тексту ссылки?

«Нажмите здесь» — не очень полезный анкорный текст. У вас должны быть слова, описывающие контент, на который ведет ссылка.

Что такое анкорный текст?

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

Существует ли более одного способа найти веб-страницу?

Вот некоторые примеры:

Карта сайта — список всех страниц на карте сайта.
Быстрые ссылки — Имейте быстрые ссылки для доступа к важным страницам.
Поиск — Поиск, чтобы найти соответствующую страницу

Виден ли фокус клавиатуры?

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

Четко ли определены верхний, основной и нижний колонтитулы?

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

Руководящий принцип 2.5 Способы ввода

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

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

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

Есть ли простой способ выйти из действия, инициированного одним указателем?

Что такое одиночный указатель?

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

Хотя бы одно из следующего должно быть правдой:

No down event — триггер срабатывает при нажатии на кнопку
Прервать или отменить — вы используете событие up (т. е. функция включается, когда указатель отпускается), и есть способ прерывания. Например, вы нажимаете на что-то пальцем, и вместо того, чтобы поднять палец прямо вверх, вы перемещаете его в другую часть экрана, и функциональность прерывается.
Разворот вверх — событие вверх отменяет событие вниз.
Важно — выполнение функции события «вниз» имеет важное значение.

Соответствует ли видимая метка компонента программному имени этого компонента?

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

Могут ли функции, управляемые движением или жестами, также управляться другими элементами пользовательского интерфейса?

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

понятно

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

3.1 Читаемый

Мы охватываем следующее:

Можно ли программно определить язык страницы или разделов страницы?

Вы должны увидеть что-то подобное в начале любой страницы. «Lang» указывает язык страницы.

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

3.2 Предсказуемость

Вы хотите, чтобы ваш пользовательский интерфейс работал предсказуемым образом, без сюрпризов!

Навигация в том же порядке на страницах?

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

Названия компонентов, изображений и т. д. одинаковы на всех страницах?

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

Если у вас есть несколько страниц поста, и вы называете страницы страница 1, страница 2, страница 3, которые соответствуют друг другу. Маркировка не обязательно должна быть одинаковой, если она не имеет смысла, но она должна быть последовательной.

3.3 Помощь при вводе

Речь идет о том, чтобы помочь пользователям избежать или исправить ошибки:

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

Ярлыки — когда пользователям нужно ввести текст, есть соответствующая метка, описывающая поле.

Ошибка ввода — если пользователь делает ошибку, то есть предложение, как ее исправить.

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

4. Надежный

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

Руководство 4.1 Совместимость

Это включает в себя тестирование с использованием различных пользовательских агентов и вспомогательных технологий. Хорошим начальным тестом для этого является использование инструмента проверки разметки W3C, чтобы увидеть, есть ли какие-либо ошибки (т.е. он проверяет правильность структуры/синтаксиса html, xhml и т. д.).

Вот пример вывода:

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

И также стоит загрузить страницу в текстовом браузере (например, Lynx).

Все ли данные могут быть проанализированы правильно?

Имеются ли правильные начальные и конечные теги в разделах контента, чтобы было легко определить, где начинается и заканчивается раздел?

Правильно ли вложены элементы?

Есть ли повторяющиеся атрибуты или идентификаторы, которые затрудняют различение элементов?

Могут ли вспомогательные технологии понимать все элементы управления пользовательского интерфейса?

Вот несколько примеров элементов управления и то, что вам нужно понять:

Чекбокс – установлен или нет?
Фокус — какой элемент имеет фокус и можно ли это понять программно (не только визуально)?

Уведомляются ли пользователи о сообщениях о состоянии, которым не уделяется внимание, таким образом, что это не обязательно прерывает работу?

Представьте, что вы просматриваете страницу, и на этой странице в верхней части веб-сайта появляется баннер, объявляющий о распродаже.

Правильно ли разработаны формы?

Чтобы сделать формы доступными, убедитесь, что включено следующее:

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

<форма>