[Перевод] Чек-лист: проверяем соответствие стандартам WCAG02.11.2024 15:00

cbdc7924e7899efe0bd34c134cb69630.png

При создании этого чек-листа в качестве основной точки отсчёта использовалось «Руководство по обеспечению доступности веб-контента» (Web Content Accessibility Guidelines, WCAG). WCAG — это универсальный стандарт для обеспечения доступности веб-контента, применимый для физических лиц, организаций и государственных структур.

Существует три уровня соответствия стандартам доступности WCAG, отражающие уровни приоритетов:

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

  • AA: Оптимальный уровень
    Требуется для большинства государственных и общественных веб-сайтов. Проект A11Y нацелен на соблюдение уровня AA.

  • AAA: Специализированный уровень
    Обычно предназначен для определённых разделов сайтов и веб-приложений, обслуживающих специализированную аудиторию.

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

Оглавление:

Критерии успеха

Каждый пункт в этом чек-листе имеет соответствующий «критерий успеха» WCAG. Критерии успеха — это конкретные, проверяемые правила, на которых основаны стандарты WCAG, обозначаемые с помощью номера и краткого названия. Например, правило об изменении размера текста имеет номер 1.4.4 и название Resize text («Изменение размера текста»).

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

Поможет ли этот чек-лист обеспечить полную доступность моего сайта?

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

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

Контент

Контент — это самая важная часть сайта.

  • Используйте простой язык и избегайте образных выражений, идиом и сложных метафор. Пишите текст на уровне 8 класса. Подробнее на w3.org: 3.1.5 Уровень чтения («Уровень чтения»)

  • Убедитесь, что содержимое элементов кнопок, ссылок и меток является уникальным и описательным. Формулировки вроде «перейдите по ссылке» или «читать дальше» не дают контекста. Некоторые пользователи перемещаются по странице, используя список всех кнопок или ссылок. В этом режиме текст этих элементов должен указывать, что произойдёт при их активации. Подробнее на w3.org: 1.3.1 Информация и взаимосвязи

  • Используйте выравнивание по левому краю для языков с направлением письма слева направо (LTR) и по правому краю для языков с направлением справа налево (RTL). Текст, выровненный по центру или по ширине, труднее читать. Подробнее на w3.org: 1.4.8 Визуальное представление

Глобальный код

Глобальный код влияет на весь сайт или веб-приложение.

  • Проверяйте HTML-код на валидность. Валидный HTML помогает обеспечить согласованное и ожидаемое взаимодействие во всех браузерах и вспомогательных технологиях. Подробнее на w3.org: 4.1.1 Парсинг 

  • Используйте атрибут lang в html-элементе. Это помогает скрин-ридерам правильно озвучивать содержимое. Подробнее на w3.org: 3.1.1 Язык страницы

  • Укажите уникальный заголовок для каждой страницы или экрана. Вспомогательные технологии часто озвучивают в качестве первой информации элемент title, размещённый в элементе head документа. Это помогает пользователям понять, на какую страницу или экран они переходят. Подробнее на w3.org: 2.4.2 Название страницы

  • Убедитесь, что масштабирование области просмотра не отключено. Некоторые пользователи вынуждены увеличивать размер текста до комфортного для них — не препятствуйте этому, даже если ваше веб-приложение имеет интерфейс, подобный нативному приложению. Даже нативные приложения должны учитывать настройки операционной системы для изменения размера текста. Подробнее на w3.org: 1.4.4 Изменение размера текста

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

  • Обеспечьте линейный порядок содержимого. Удалите значения атрибута tabindex, отличные от 0 и -1. Элементы, получающие фокус по умолчанию (ссылки, кнопки), не требуют атрибута tabindex. Элементы, которые не имеют фокуса по умолчанию, не должны содержать tabindex, за исключением специфических случаев. Подробнее на w3.org: 2.4.3 Порядок фокуса

  • Избегайте использования атрибута autofocus. Люди с нарушениями зрения могут быть дезориентированы, когда фокус меняется без их согласия. Кроме того, атрибут autofocus может вызвать затруднения у пользователей с нарушениями моторики, так как им может потребоваться дополнительное время, чтобы покинуть область автофокуса и перейти к другим элементам на странице или экране. Подробнее на w3.org: 2.4.3 Порядок фокуса

  • Разрешите продление времени сеанса. Если вы не можете полностью отключить тайм-ауты, предоставьте пользователю возможность легко отключить, изменить или продлить сеанс задолго до его окончания. Подробнее на w3.org: 2.2.1 Регулируемое время

  • Удалите всплывающие подсказки атрибута title. Атрибут title имеет множество проблем и его не следует использовать, особенно если важно, чтобы предоставленная информация была доступа всем пользователям. Допустимым применением атрибута title может быть пометка элемента iframe для указания на содержимое внутри. Подробнее на w3.org: 4.1.2 Имя, Роль, Значение

Клавиатура

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

  • Убедитесь, что у интерактивных элементов, к которым переходят с помощью клавиатуры, есть видимый стиль фокуса. Видит ли человек, использующий клавиатуру, голосовое управление или скрин-ридер, текущее положение на странице? Подробнее на w3.org: 2.4.7 Видимый фокус

  • Проверьте, что порядок фокуса с клавиатуры соответствует визуальному расположению. Может ли человек, использующий клавиатуру или скрин-ридер, перемещаться по странице предсказуемо? Подробнее на w3.org: 1.3.2 Осмысленная последовательность

  • Удалите невидимые элементы, доступные для фокуса. Уберите возможность фокусироваться на элементах, которые в данный момент не должны быть видимы — например, неактивные выпадающие меню, навигация за пределами экрана или модальные окна. Подробнее на w3.org: 2.4.3 Порядок фокуса

Изображения

Большинство веб-сайтов содержит большое количество изображений — постарайтесь обеспечить их доступность для всех пользователей. Подробнее обо всех пунктах можно почитать в разделе w3.org 1.1.1 Нетекстовый контент

  • Убедитесь, что у всех элементов img прописан атрибут alt. Атрибуты alt (альтернативный текст) предоставляют описание изображения для людей, которые могут не иметь возможности его увидеть. Если атрибут alt отсутствует, скрин-ридер озвучит имя файла и путь к изображению вместо его содержания, что не позволяет понять смысл изображения. 

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

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

  • Для изображений, содержащих текст, убедитесь, что alt-описание включает текст изображения. Например, изображение логотипа FedEx должно иметь alt значение «FedEx». 

Заголовки

Элементы заголовков (h1, h2, h3 и т.д.) помогают разбить содержимое страницы на связанные информационные чанки. Они крайне важны для пользователей вспомогательных технологий, поскольку помогают понять структуру и содержание страницы или экрана. Подробнее обо всех пунктах можно почитать в разделе w3.org 2.4.6 Заголовки или Метки.

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

  • Используйте только один элемент h1 на каждой странице или экране. Элемент h1 следует использовать для передачи основной цели страницы или экрана. Не применяйте h1 для заголовка, который не меняется на разных страницах или экранах (например, название сайта).

  • Элементы заголовков должны быть размещены в логической последовательности. Порядок заголовков должен быть нисходящим, в зависимости от «глубины» содержимого — например, элемент h4 не должен появляться на странице раньше первого элемента h3. Для оценки можно использовать инструмет headingsMap.

  • Не пропускайте уровни заголовков. Например, не переходите от h2 к h4, пропуская h3. Если уровни заголовков пропускаются с целью достичь определённого визуального эффекта, используйте вместо этого CSS-классы.

Списки

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

  • Используйте элементы списка (ol, ul и dl) для представления содержимого в виде списка. Это может включать разделы связанного контента, элементы, отображаемые в виде сетки, или соседние элементы a. Подробнее на w3.org: 1.3.1 1.3.1 Информация и взаимосвязи

Элементы управления

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

  • Используйте элемент a для ссылок. Ссылки всегда должны иметь атрибут href, даже в одностраничных приложениях (SPA). Без атрибута href ссылка не будет корректно доступна вспомогательным технологиям, например, если вместо атрибута href используется событие onclick. Подробнее на w3.org: 1.3.1 Информация и взаимосвязи

  • Убедитесь, что ссылки легко распознаются как ссылки. Одного цвета недостаточно, чтобы обозначить наличие ссылки. Общепринятым способом указания на наличие ссылочного контента является подчёркивание. Подробнее на w3.org: 1.4.1 Использование цвета

  • Убедитесь, что у элементов управления есть состояние :focus. Видимые стили фокуса помогают пользователям определить, какой интерактивный элемент находится в фокусе клавиатуры. Благодаря этому они понимают, что могут выполнить такие действия, как активация кнопки или переход по ссылке. Подробнее на w3.org: 2.4.7 Видимый фокус

  • Для кнопок используйте элемент button. Кнопки используются для отправки данных или выполнения действия на экране, при этом фокус клавиатуры не меняется. Можно добавить type="button" к элементу button, чтобы предотвратить попытку браузера отправить информацию формы при активации. Подробнее на w3.org: 1.3.1 Информация и взаимосвязи

  • Предоставьте ссылку для пропуска содержимого (skip link) и убедитесь, что она видна, когда находится в фокусе. Ссылка для пропуска позволяет быстро перейти к основному содержимому страницы или экрана. Это помогает пользователю легко обойти глобально повторяющийся контент, такой как основная навигация сайта или постоянное окно поиска. Подробнее на w3.org: 2.4.1 Обход блоков

  • Предупреждайте, если ссылки открываются в новом окне. По возможности избегайте таких ссылок. Но если ссылка всё же открывается в новом окне, убедитесь, что её поведение понятно всем пользователям. Это помогает людям понять, что произойдёт, если они совершат переход по ссылке. Хотя этот приём технически не обязателен для соблюдения стандартов, он часто вызывает неудобства у пользователей различных вспомогательных технологий. Подробнее на w3.org: Предупреждение пользователей о переходе в новое окно

Таблицы

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

  • Используйте элемент table для представления табличных данных. Нужно отобразить данные в виде строк и столбцов? Используйте элемент table. Подробнее на w3.org: 1.3.1 Информация и взаимосвязи

  • Используйте элемент th для заголовков таблиц (с соответствующими атрибутами scope). В зависимости от сложности таблицы можно также использовать scope="col" для заголовков столбцов и scope="row" для заголовков строк. Атрибут scope по-прежнему используется многими вспомогательными технологиями для правильной интерпретации и описания структуры таблицы. Подробнее на w3.org: 4.1.1 Парсинг

  • Используйте элемент caption, чтобы добавить заголовок для таблицы. Заголовок таблицы должен описывать, какую информацию она содержит. Подробнее на w3.org: 2.4.6 Заголовки или Метки

Формы

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

  • Все поля ввода в форме должны быть связаны с соответствующим элементом label. Используйте связку for/id, чтобы обеспечить максимальную поддержку браузеров и вспомогательных технологий. Подробнее на w3.org: 3.2.2 При вводе

  • Используйте элементы fieldset и legend, когда это уместно. Содержит ли ваша форма несколько разделов с взаимосвязанными полями? Используйте fieldset для группировки, а legend — для обозначения назначения каждого раздела. Подробнее на w3.org: 1.3.1 Информация и взаимосвязи

  • Используйте автозаполнение полей ввода, где это уместно. Обеспечьте механизм, позволяющий пользователям быстрее и точнее заполнять поля формы для часто запрашиваемой информации (например, имя, email, номер телефона). Подробнее на w3.org: 1.3.5 Определение назначения ввода

  • Убедитесь, что в случае ошибок при заполнении полей над формой отображается понятное объяснение. Это помогает пользователям быстро понять, какие именно проблемы возникли при заполнении формы, что особенно важно для больших форм с множеством полей. Убедитесь, что в предупреждении об ошибках понятно, о каких полях идёт речь. Подробнее на w3.org: 3.3.1 Идентификация ошибок

  • Свяжите сообщения об ошибках с соответствующими полями. Использование aria-describedby позволяет пользователям легче понимать связь между полем и сообщением об ошибке, связанным с ним. Подробнее на w3.org: 3.3.1 Идентификация ошибок

  • Убедитесь, что информация об ошибках и другие предупреждения передаются не только цветом. Люди с нарушениями зрения или другим культурным восприятием цвета могут не видеть изменения состояния или не понимать, какой именно тип обратной связи он представляет, если цвет — единственный индикатор. Подробнее на w3.org: 1.4.1 Использование цвета

Медиа

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

  • Убедитесь, что медиа не воспроизводится автоматически. Неожиданное воспроизведение видео или аудио может мешать; особенно людям с некоторыми когнитивными нарушениями, такими как СДВГ. Определённые виды автоматически воспроизводимого видео и анимации могут вызывать проблемы у людей с вестибулярными нарушенями или склонностью к судорожным приступам. Подробнее на w3.org: 1.4.2 Управление аудио

  • Убедитесь, что элементы управления медиа используют корректную разметку. Например, кнопка отключения звука должна иметь активное состояние при нажатии, а ползунок громкости должен использовать . Подробнее на w3.org: 1.3.1 Информация и взаимосвязи

  • Проверьте, что любое медиа можно приостановить. Обеспечьте глобальную функцию паузы для любого элемента медиа. Если устройство оснащено клавиатурой, убедитесь, что нажатие клавиши Пробел может приостановить воспроизведение. Убедитесь также, что Пробел не мешает прокрутке страницы/экрана, когда фокус не находится на элементах управления формой. Подробнее на w3.org: 2.1.1 Клавиатура

Видео

Проверки, относящиеся к видео.

  • Убедитесь в наличии субтитров. Субтитры позволяют людям, которые не могут слышать аудиосодержимое, понимать содержание видео. Подробнее на w3.org: 1.2.2 Субтитры

  • Устраните триггеры, которые способны вызвать эпилептический приступ. Определённые виды мигающей или стробирующей анимации могут вызывать приступы судорог. Подробнее на w3.org: 2.3.1 Три вспышки или ниже порога

Аудио

Проверки, относящиеся к аудио.

  • Убедитесь, что доступны текстовые расшифровки. Текстовые расшифровки позволяют людям, которые не могут слышать, понимать содержание аудио. Они также позволяют воспринимать аудиоконтент с комфортной скоростью. Подробнее на w3.org: 1.1.1 Нетекстовый контент

Внешний вид

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

  • Проверьте содержимое в специализированных режимах просмотра. Активируйте такие режимы, как «Высокая контрастность» в Windows или «Инвертированные цвета». Остаётся ли ваш контент читаемым? Видны ли иконки, границы, ссылки, поля формы и другие элементы? Можно ли отличить контент переднего плана от фонового контента? Подробнее на w3.org: 1.4.1 Использование цвета

  • Увеличьте размер текста до 200%. Остаётся ли контент читаемым? Не приводит ли увеличение текста к наложению элементов? Подробнее на w3.org: 1.4.4 Изменение размера текста

  • Проверьте, что между элементами контента сохраняется достаточное расстояние. Используйте метод «соломинки», чтобы убедиться, что люди, использующие программы для увеличения экрана, могут легко находить весь контент. Подробнее на w3.org: 1.3.3 Сенсорные характеристики

  • Убедитесь, что цвет не является единственным способом передачи информации. Можно ли по-прежнему различить ссылки в основном контенте, если всё отображается в оттенках серого? Подробнее на w3.org: 1.4.1 Использование цвета

  • Убедитесь, что инструкции не ограничиваются только визуальными или аудиальными элементами. Используйте сочетание характеристик для написания подсказок — особенно реальные названия разделов и элементов, а не только описания, такие как местоположение («справа») или звук («после сигнала»). Подробнее на w3.org: 1.3.3 Сенсорные характеристики

  • Используйте простой, понятный и логичный макет. Сложный макет может быть трудным для понимания и использования. Подробнее на w3.org: 1.4.10 Reflow

Анимация

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

  • Убедитесь, что анимация ненавязчива и не содержит чрезмерного мигания. Определённые виды стробирующей или мигающей анимации могут вызвать приступы судорог. Другие виды анимации могут отвлекать и создавать неудобства, особенно для людей с когнитивными нарушениями, такими как СДВГ. Подробнее на w3.org: 2.3.1 Три вспышки или ниже порога

  • Обеспечьте механизм для приостановки фонового видео. Фоновое видео может отвлекать, особенно если поверх него размещён основной контент. Подробнее на w3.org: 2.2.2 Пауза, Остановка, Скрытие

  • Убедитесь, что вся анимация соответствует медиазапросу prefers-reduced-motion. Отключите анимацию, если активна настройка «уменьшить движение». Если анимация необходима для передачи смысла, замедлите её. Подробнее на w3.org: 2.3.3 Анимация при взаимодействиях

Контраст цветов

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

  • Проверьте контраст для текста обычного размера. Для соответствия уровню AA требуется соотношение контрастности 4.5:1. Подробнее на w3.org: 1.4.3 Контраст

  • Проверьте контраст для текста большого размера. Для соответствия уровню AA требуется соотношение контрастности 3:1. Подробнее на w3.org: 1.4.3 Контраст

  • Проверьте контраст для всех иконок. Для соответствия уровню AA требуется соотношение контрастности 3.0:1. Подробнее на w3.org: 1.4.11 Контраст для нетекстовых элементов

  • Проверьте контраст границ для элементов ввода (текстовых полей, радиокнопок, чекбоксов и т.д.). Для соответствия уровню AA требуется соотношение контрастности 3.0:1. 1.4.11 Контраст для нетекстовых элементов

  • Проверьте текст, накладывающийся на изображения или видео. Остаётся ли текст читаемым? Подробнее на w3.org: 1.4.3 Контраст

  • Проверьте пользовательские цвета выделения ::selection. Достаточен ли установленный вами цветовой контраст в CSS для выделенного текста? Иначе текст может оказаться нечитаемым при выделении. Подробнее на w3.org: 1.4.3 Контраст

Мобильные устройства и сенсорное управление

Что следует учитывать для работы на мобильных устройствах.

  • Проверьте, можно ли повернуть сайт в любом направлении. Не ограничено ли отображение только портретной ориентацией? Подробнее на w3.org: 1.3.4 Ориентация

  • Уберите необходимость в горизонтальной прокрутке. Горизонтальная прокрутка может вызывать затруднения у некоторых пользователей и раздражение у большинства. Подробнее на w3.org: 1.4.10 Reflow 

  • Убедитесь, что кнопки и иконки ссылок можно легко активировать. Убедитесь, что такие элементы, как меню-гамбургеры, социальные иконки, просмотрщики галерей и другие сенсорные элементы управления, подходят для использования пальцами и стилусами разных размеров. Подробнее на w3.org: 2.5.5 Размер цели

  • Обеспечьте достаточное пространство между интерактивными элементами для создания области прокрутки. Некоторым пользователям с нарушениями моторики (например, при треморе рук) может быть сложно прокручивать интерактивные элементы без промежутков. Подробнее на w3.org: 2.4.1 Обход блоков

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

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

Habrahabr.ru прочитано 5885 раз