Требования WCAG — это рекомендации по доступности веб-содержимого, которые разрабатывает W3C. По ним оценивают, могут ли пользоваться сайтом люди с инвалидностью. Законы ЕС, которые применяются к сайтам, опираются на уровень AA: в версии WCAG 2.1 он включает 50 критериев — 30 уровня A и 20 уровня AA. Ниже объясняем, как WCAG связаны с европейским стандартом EN 301 549, и даём таблицу главных критериев простыми словами.
Что такое WCAG и EN 301 549
WCAG (Web Content Accessibility Guidelines) — международные рекомендации, которые готовит W3C, организация по стандартам Всемирной паутины. WCAG 2.1 опубликованы в июне 2018 года, WCAG 2.2 — в октябре 2023 года.
EN 301 549 — европейский стандарт, который устанавливает требования доступности для информационных и коммуникационных технологий. Его версия V3.2.1 применяет к сайтам (раздел 9) критерии WCAG 2.1 уровней A и AA. В других разделах описаны требования к документам, программам, документации и службам поддержки.
К сайтам государственного сектора в ЕС этот стандарт применяется уже с 2019 года. Интернет-магазины и другие услуги, на которые распространяется Европейский акт о доступности, на практике оценивают по тем же критериям.
Четыре принципа WCAG
Все критерии WCAG сгруппированы по четырём принципам:
| Принцип | Что значит | Пример |
|---|---|---|
| Воспринимаемость | Информацию можно получить не одним органом чувств | У изображения есть текстовое описание, у видео — субтитры |
| Управляемость | Сайтом можно управлять разными способами | Все функции работают и с клавиатуры, а не только мышью |
| Понятность | Содержимое и поведение сайта понятны | Ошибки формы объясняются словами, меню везде на одном месте |
| Надёжность | Код работает с разными браузерами и вспомогательными программами | Названия и состояния кнопок указаны в коде |
Уровни соответствия A, AA и AAA
- A — минимальный уровень. Если эти критерии не выполнены, часть людей вообще не сможет пользоваться сайтом.
- AA — включает все критерии A и ещё 20. Именно этого уровня требует стандарт EN 301 549, на который опираются европейские законы.
- AAA — высший уровень (ещё 28 критериев). W3C не рекомендует требовать его для всего сайта: для некоторого содержимого выполнить все критерии AAA невозможно.
Главные критерии WCAG 2.1 AA: чек-лист
В таблице — главные критерии, которые стоит проверить в первую очередь. Названия сокращены, номера — как в WCAG 2.1.
| № | Критерий | Уровень | Что это значит простыми словами |
|---|---|---|---|
| 1.1.1 | Нетекстовое содержимое | A | У изображений, иконок и графиков есть альтернативный текст, у декоративных — пустой |
| 1.2.2 | Субтитры (записи) | A | У видео со звуком есть субтитры |
| 1.2.5 | Аудиоописание | AA | Важная зрительная информация, которую нельзя услышать, передаётся аудиоописанием |
| 1.3.1 | Информация и связи | A | Заголовки, списки, таблицы и подписи полей формы размечены в коде, а не только визуально |
| 1.3.4 | Ориентация | AA | Сайт работает и при вертикальном, и при горизонтальном положении экрана |
| 1.4.1 | Использование цвета | A | Информация передаётся не только цветом |
| 1.4.3 | Контраст | AA | Контраст текста с фоном не меньше 4,5:1, крупного текста — 3:1 |
| 1.4.4 | Изменение размера текста | AA | При увеличении текста до 200 % содержимое и функции не теряются |
| 1.4.10 | Перекомпоновка | AA | На экране шириной 320 CSS-пикселей не нужно прокручивать страницу вбок |
| 1.4.11 | Контраст нетекстовых элементов | AA | Контраст кнопок, границ полей и иконок не меньше 3:1 |
| 2.1.1 | Клавиатура | A | Все функции работают с клавиатуры |
| 2.2.2 | Пауза и остановка | A | Автоматически движущееся содержимое, например карусель, можно остановить |
| 2.3.1 | Три вспышки | A | Ничего не мигает чаще 3 раз в секунду |
| 2.4.1 | Пропуск блоков | A | Можно пропустить повторяющееся меню и перейти к содержимому |
| 2.4.2 | Заголовок страницы | A | У каждой страницы есть понятный заголовок |
| 2.4.4 | Назначение ссылки | A | Из текста ссылки или контекста понятно, куда она ведёт |
| 2.4.6 | Заголовки и подписи | AA | Заголовки и подписи полей описывают содержимое |
| 2.4.7 | Видимый фокус | AA | Активный элемент хорошо виден |
| 3.1.1 | Язык страницы | A | Язык страницы указан в коде |
| 3.2.3 | Последовательная навигация | AA | Меню на всех страницах на одном месте и в одном порядке |
| 3.3.1 | Указание на ошибку | A | Ошибка в форме описана текстом |
| 3.3.2 | Подписи или инструкции | A | У каждого поля формы есть подпись |
| 4.1.2 | Имя, роль, значение | A | У кнопок, меню и других элементов управления в коде указаны название и состояние |
| 4.1.3 | Сообщения о состоянии | AA | Сообщение «Товар добавлен в корзину» озвучивает программа чтения с экрана |
Таблица помогает быстро оценить сайт, но охватывает не все 50 критериев. Как проверить сайт с клавиатуры и программой чтения с экрана, шаг за шагом описано в статье как сделать сайт доступным.
Чем требования WCAG 2.2 отличаются от 2.1
WCAG 2.2 добавляет шесть новых критериев уровней A и AA:
- 2.4.11 Фокус не перекрыт (AA) — активный элемент не закрыт полностью прилипшей шапкой или баннером cookies;
- 2.5.7 Перетаскивание (AA) — перетаскивание можно заменить простым нажатием;
- 2.5.8 Размер цели (AA) — кликабельные элементы не меньше 24 × 24 CSS-пикселей или достаточно отстоят друг от друга;
- 3.2.6 Единообразная помощь (A) — контакты или ссылка на помощь на всех страницах в одном месте;
- 3.3.7 Повторный ввод (A) — одни и те же данные не нужно вводить второй раз;
- 3.3.8 Доступная аутентификация (AA) — при входе не нужно решать головоломки или запоминать коды, пароль можно вставить.
Критерий 4.1.1 «Синтаксический анализ» в WCAG 2.2 удалён. Сайт, соответствующий WCAG 2.2 AA, соответствует и WCAG 2.1 AA, поэтому при создании нового сайта стоит сразу стремиться к более новой версии. Обязательной WCAG 2.2 не является: EN 301 549 опирается на WCAG 2.1.
Не только страницы: документы, видео и телефон
Требования EN 301 549 касаются не только страниц сайта. В опубликованных на сайте PDF и других документах должны быть заголовки, разметка и описания изображений. Видео нужны субтитры, а если на экране показана важная информация — и её описание. Сайт должен работать и на телефоне: при повороте экрана, увеличении текста и с программой чтения с экрана.
Как пользоваться этим списком
Если вы создаёте новый сайт или интернет-магазин, включите требования WCAG в техническое задание: выполнить их сразу проще, чем исправлять уже работающий сайт. Если сайт уже работает, начните с критических ошибок: управления с клавиатуры, форм и контраста.
Проверка по WCAG 2.1 AA и исправление найденных ошибок входят в услугу доступность сайта. Если планируете новый сайт, требования доступности обсудим ещё до начала работ по созданию сайта.
Опубликовано
Источники
- W3C, Web Content Accessibility Guidelines (WCAG) 2.1 (на английском) (другой сайт)
- W3C, Web Content Accessibility Guidelines (WCAG) 2.2 (на английском) (другой сайт)
- W3C WAI, What's New in WCAG 2.2 (на английском) (другой сайт)
- ETSI EN 301 549 V3.2.1 — требования доступности для продуктов и услуг ИКТ (на английском) (другой сайт)
- Директива (ЕС) 2016/2102 о доступности сайтов и мобильных приложений органов государственного сектора, EUR-Lex (другой сайт)
- Директива (ЕС) 2019/882 (Европейский акт о доступности), EUR-Lex (другой сайт)