Чеклист соответствия требованиям WCAG

Внимание!

Следующий перечень не перевод стандарта WCAG, а чеклист-рекомендация по внедрению доступности. Это упрощённая подача официальной рекомендации WCAG 2.1. Является переводом чеклиста с сайта WebAIM.

# Восприятие

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

1.1.1 Нетекстовой контент (A)

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

Изображения, не передающие контент, являющиеся декоративными или содержащие контент, уже описанный текстом, имеют пустое значение атрибута alt="" или вставлены фоном.

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

Значение кнопок в формах описывают их назначение.

У полей ввода в формах есть соответствующий им текстовый лейбл.

Мультимедийный контент описан доступным текстом.

Элементы iframe озаглавлены надлежащим образом.

1.2 Динамичный медиа-контент

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

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

1.2.1 Аудио и видео (в записи) (A)

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

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

1.2.2 Титры (в записи) (A)

Синхронизированные титры предоставляются для предзаписанного видео.

1.2.3 Аудио-описание или медиа-альтернатива (в записи) (A)

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

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

1.2.4 Титры («живые») (AA)

Синхронизированные титры предоставляются для «живого» аудио-контента.

1.2.5 Аудио-описание (в записи) (AA)

Аудио-описание предоставляется для всего предзаписанного видео-контента

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

Хотя это и не требуется на уровне AA, для обеспечения наилучшей доступности WebAIM рекомендует расшифровку в дополнение к аудио-описанию.

1.2.6 Язык жестов (в записи) (AAA)

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

1.2.7 Расширенное описание аудио (в записи) (AAA)

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

1.2.8 Альтернатива медиа (предварительно записано) (AAA)

Расшифровка предоставляется для предварительно записанных носителей, на которых есть видеодорожка. Для оптимальной доступности WebAIM настоятельно рекомендует использовать расшифровку для всех мультимедийных файлов.

1.2.9 Только аудио (Live) (AAA)

Описательная текстовая расшифровка (например, сценарий живого аудио) предоставляется для живого контента, который имеет аудио.

1.3 Адаптируемость

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

1.3.1 Информация и взаимосвязи (A)

Семантическая разметка используется для обозначения заголовков (<h1>), регионов / ориентиров, списков (<ul>, <ol> и <dl>), выделенного или специального текста (<strong>, <code>, <abbr>, <blockquote>, например) и т. д. Семантическая разметка используется надлежащим образом.

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

Текстовые метки связаны с элементами ввода формы. Связанные элементы формы сгруппированы с помощью fieldset / legend. Маркировка ARIA может использоваться, когда стандартного HTML недостаточно.

1.3.2 Понятная последовательность (A)

Порядок чтения и навигации (определяется порядком кода) является логичным и интуитивно понятным.

1.3.3 Сенсорные характеристики (A)

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

Инструкции не основаны на звуке (например, «Звуковой сигнал указывает, что вы можете продолжить»).

1.3.4 Ориентация (AA)

Ориентация веб-контента не ограничивается только портретной или альбомной ориентацией, если только не требуется специальная ориентация.

1.3.5 Обозначение назначения поля ввода (AA)

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

1.3.6 Обозначение назначения (AAA)

Регионы HTML5 или ориентиры ARIA используются для определения областей страниц.

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

1.4.1 Использование цвета (A)

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

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

1.4.2 Контроль звука (A)

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

1.4.3 Контраст (минимальный) (AA)

Текст и изображения текста имеют коэффициент контрастности не менее 4.5: 1.

Большой текст, не менее 18 точек (обычно 24 пикселя) или 14 точек (обычно 18,66 пикселя) и жирный, имеет контрастность не менее 3:1.

1.4.4 Изменение размера текста (AA)

Страница читаема и функциональна, когда она увеличена до 200%.

Примечание: 1.4.10 (ниже) вводит гораздо более высокие требования к увеличенному контенту.

1.4.5 Изображения текста (AA)

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

1.4.6 Контраст (повышенный) (AAA)

Текст и изображения текста имеют контрастность не менее 7:1.

Большой текст - жирность не менее 18 точек (обычно 24 пикселя) или 14 точек (обычно 18,66 пикселя) - имеет контрастность не менее 4,5: 1.

1.4.7 Тихий или отсутствующий фоновый звук (AAA)

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

1.4.8 Визуальное представление (AAA)

Блоки текста длиной более одного предложения:

Не более 80 символов в ширину.

НЕ выравниваются по ширине (выровнены по левому и правому краям).

Имеют достаточный межстрочный интервал (не менее 1/2 высоты текста) и интервал между абзацами (1,5 межстрочных интервала).

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

НЕ вызывают горизонтальную прокрутку при двукратном увеличении размера текста.

1.4.9 Изображения текста (без исключений) (AAA)

В изображении текст используется только для оформления (изображение не передает содержание) ИЛИ если информация не может быть представлена только текстом.

1.4.10 Переформатирование (AA)

Представление контента в ширине 320 пикселей не вызывает горизонтальную прокрутку и не приводит к потери содержимого или функциональности.

Примечание: Это требует адаптивного дизайна для большинства веб-сайтов. Это лучше всего проверить, установив ширину окна браузера в 1280 пикселей, а затем увеличив содержимое страницы до 400%.

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

1.4.11 Контраст нетекстовых элементов (AA)

Коэффициент контрастности не менее 3:1 используется для различия графических объектов (таких как значки и компоненты диаграмм или графиков) и пользовательских компонентов интерфейса (таких как кнопки, элементы управления формой и индикаторы / контуры фокуса).

Контраст по крайней мере 3:1 должен быть обеспечен в различных состояниях (фокуса, наведения, активации и т.д.) в интерактивных компонентах, настраиваемых автором.

1.4.12 Разрядка текста (AA)

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

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

1.4.13 Контент при наведении указателя или передаче фокуса (AA)

Когда дополнительный контент отображается при наведении курсора или при попадании на элемент с клавиатуры:

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

Курсор может быть перемещен на новый контент без исчезновения контента.

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

# Управляемость

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

2.1.1 Клавиатура (A)

Все функциональные возможности страницы доступны с использованием клавиатуры, если только функциональные возможности не могут быть выполнены каким-либо известным способом с использованием клавиатуры (например, рисование от руки).

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

2.1.2 Клавиатура не блокирует фокус (A)

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

2.1.3 Клавиатура (без исключений) (AAA)

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

2.1.4 Знаковые «быстрые клавиши» (A)

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

2.2.1 Управление временем (A)

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

2.2.2 Пауза, остановка, сокрытие (A)

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

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

2.2.3 Без временных ограничений (ААА)

Содержание и функциональность не имеют временных ограничений.

2.2.4 Прерывания (ААА)

Прерывания (оповещения, обновления страниц и т. д.) Могут быть отложены или скрыты пользователем.

2.2.5 Повторная аутентификация (ААА)

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

2.2.6 Тайм-ауты (ААА)

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

2.3.1 Не более трех вспышек (А)

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

2.3.2 Три вспышки (ААА)

Веб-страница не содержит контента, который вспыхивает более трех раз в секунду.

2.3.3 Анимация в результате взаимодействия (ААА)

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

2.4.1 Пропуск блоков (А)

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

Надлежащая структура заголовков и / или идентификация областей / ориентиров страницы может считаться достаточной техникой. Поскольку навигация по заголовкам или регионам не поддерживается в большинстве браузеров, WebAIM рекомендует использовать ссылку «пропустить» (в дополнение к заголовкам и регионам) для лучшей поддержки зрячих пользователей клавиатуры.

2.4.2 Заголовок страницы (А)

Веб-страница снабжена заголовком, который описывает её содержание и назначение.

2.4.3 Порядок передачи фокуса (А)

Порядок навигации по ссылкам, элементам формы и т.д. логичен и интуитивно понятен.

2.4.4 Назначение ссылки (в контексте) (А)

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

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

2.4.5 Несколько путей (АА)

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

2.4.6 Заголовки и ярлыки (AA)

Заголовки страниц и ярлыки для форм и интерактивных элементов управления являются информативными. Избегайте дублирования заголовка (например, «Подробнее») или текста метки (например, «Имя»), если структура не обеспечивает адекватного различия между ними.

2.4.7 Видимый фокус (АА)

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

2.4.8 Местоположение (ААА)

Если веб-страница является частью последовательности страниц или в структуре сложного сайта, указание текущего местоположения страницы предоставляется, например, с помощью хлебных крошек или указания текущего шага в последовательности (например, "Шаг 2 из 5 - Адрес доставки").

2.4.9 Назначение ссылки (только ссылка) (ААА)

Назначение каждой ссылки (или кнопки форм с изображениями или активные области карты изображений) можно определить только из текста ссылки.

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

2.4.10 Заголовки разделов (AAA)

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

2.5.1 Управление жестами (А)

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

2.5.2 Отмена нажатия (А)

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

2.5.3 Текст ярлыка в имени (А)

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

2.5.4 Управление движением (А)

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

2.5.5 Размер «мишени» (ААА)

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

2.5.6 Различные механизмы управления (ААА)

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

# Понятность

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

3.1.1 Язык страницы (А)

Язык страницы определяется с помощью атрибута HTML lang (например, <html lang = "ru">).

3.1.2 Язык частей страницы (АА)

Язык содержимого страницы на другом языке идентифицируется с использованием атрибута lang (например, <blockquote lang = "es">).

3.1.3 Необычные слова (ААА)

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

3.1.4 Аббревиатуры (ААА)

Значение незнакомого сокращения обеспечивается его открытием при первом использовании, использованием тега <abbr> или ссылкой на определение или глоссарий.

3.1.5 Уровень чтения (ААА)

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

3.1.6 Произношение (ААА)

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

3.2.1 По получению фокуса (А)

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

3.2.2 По вводу (А)

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

3.2.3 Единообразная навигация (АА)

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

3.2.4 Единообразная идентификация (АА)

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

3.2.5 Изменение по запросу (ААА)

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

3.3.1 Обозначение ошибок (А)

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

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

3.3.2 Ярлыки или инструкции (А)

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

3.3.3 Подсказки при ошибках (АА)

Если обнаружена ошибка ввода (посредством проверки на стороне клиента или на стороне сервера), предоставляются предложения по своевременному и доступному исправлению ввода.

3.3.4 Предотвращение ошибок (юридических, финансовых, управления данными) (АА)

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

3.3.5 Справка (ААА)

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

3.3.6 Предотвращение ошибок (любых) (ААА)

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

# Надёжность

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