На неделе уже мелькал WCAG, давайте сегодня поговорим о нём.
Web Content Accessibility Guidelines или коротко WCAG — это руководство по доступности веб-контента. Первая версия была принята аж в 1999, последняя, 2.1, — в 2018.
В Руководстве даны рекомендации о том, как сделать контент сайтов и приложений максимально доступным для пользователей.
Эти рекомендации сами по себе не обязательны. Тут есть нюанс: законы, которые регулируют веб-доступность, ссылаются на Руководство. Так что, при определённых обстоятельствах вроде судебных исков, рекомендации становятся требованиями.
Руководством занимается отдельная рабочая группа W3C — Accessibility Guidelines Working Group.
w3.org/WAI/GL/
Все рекомендации можно разделить на 4 большие группы. Они основаны на главных принципах доступности: воспринимаемости, управляемости, понятности и надёжности. Сокращённо они называются POUR по первым буквам: Perceivable, Operable, Understandable, Robust.
Воспринимаемость означает, что интерфейсы и информацию в них должны понимать любые пользователи.
С управляемостью всё просто: навигация должна быть доступна для всех пользователей, включая тех, кто пользуется клавиатурой или вспомогательными технологиями.
Под понятностью подразумевается, что контент и дизайн интерфейса должны быть понятными каждому.
Надёжность значит, что контент должен отображаться на всех устройствах, во всех программах и приложениях, а также быть доступными для разных вспомогательных технологий.
У рекомендаций есть чёткие критерии выполнения, а также уровень соответствия им. На самом деле эти критерии универсальные и не привязаны к конкретным технологиям.
Уровня соответствия всего три: А (низший), АА (средний) и ААА (наивысший). Законы о веб-доступности требуют выполнения критериев на уровне AA и выше.
Расскажу о некоторых критериях со средним и наивысшим приоритетом.
Контраст между текстом обычного размера и фоном должен быть равен 4.5:1, а для большого — 3:1. Проверить контрастность можно, например, при помощи инструмента WebAIM: webaim.org/resources/cont…. Это уровень AA.
Требования по контрастности можно не соблюдать для неактивных элементов в состоянии disabled, всяких декоративных элементов и логотипов.
Всем контентом сайта можно управлять с клавиатуры (уровень ААА). Также должно быть проработано состояние таких элементов при фокусе (уровень AA).
Всем контентом сайта можно управлять с клавиатуры (уровень ААА). Также должно быть проработано состояние таких элементов при фокусе (уровень AA).
Если одна сессия истекла, то пользователь должен иметь возможность авторизоваться снова и продолжить свою работу с того момента, в который она прервалась (уровень ААА).
Если используете анимацию, то частота мигания должна быть не больше 3 раз в секунду (уровень ААА). Проверить gif-анимацию на доступность можно с помощью Photosensitive Epilepsy Analysis Tool: trace.umd.edu/peat.
Инструмент не очень удобный и больше заточен под Windows, так что если вы знаете хорошую альтернативу ему, то поделитесь.
Нужно программно определять основной язык в абзацах и в отдельных фразах. Например, при помощи атрибута lang. Исключения: имена собственные, технические термины, слова из другого языка и заимствованные (уровень АА).
Изменения на странице должны происходить только если пользователь этого хочет. Он должен иметь возможность отключить их в любой момент (уровень ААА).
Пользователей надо предупреждать обо всех ошибках. При этом при их возникновении уже введённые данные не должны пропадать. Конечно, нужно давать возможность их исправить и указывать, как именно это можно сделать (уровень ААА).
Это далеко не все требования Руководства. Они логичны и просты. Если появилось желание почитать WCAG 2.1, то сделать это можно здесь: w3.org/TR/WCAG21/
На русский пока переведена только предыдущая версия 2.0: w3.org/Translations/W…
Таня Фокина