Зачем нужна доступность: уровни WCAG

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

• Нарушения зрения — слепота, слабое зрение, дальтонизм
• Нарушения опорно-двигательного аппарата — невозможность пользоваться мышью
• Нарушения слуха — глухота
• Когнитивные нарушения — дислексия, ADHD, проблемы с памятью

Доступность важна по нескольким причинам:

• Право человека — каждый заслуживает доступа к веб-среде
• Юридическое требование — ADA, раздел 508, Закон EU о доступности
• Деловая выгода — 15% населения мира имеют инвалидность (1 миллиард человек)
• Поисковая оптимизация — доступные сайты часто занимают более высокие позиции
• Улучшение опыта для всех — эффект понижения бордюров: подписи помогают в шумной обстановке

WCAG (Руководство по обеспечению доступности веб-содержимого) — международный стандарт доступности веб-сайтов, опубликованный W3C:

• Текущая версия: WCAG 2.1 (широко используется), WCAG 2.2 (2023)
• WCAG 3.0 находится в разработке
• Стандарт организован вокруг 4 принципов: POUR

WCAG основан на четырёх ключевых принципах. Содержимое должно быть:

• P воспринимаемым — пользователи должны иметь возможность воспринимать информацию
• O управляемым — пользователи должны иметь возможность управлять интерфейсом
• U понятным — содержимое должно быть понятным
• R надёжным — содержимое должно работать с современными и будущими вспомогательными технологиями

WCAG предусматривает три уровня соответствия:

• Уровень A — минимальный; ему необходимо соответствовать. Без него значительные группы пользователей оказываются исключены.
• Уровень AA — рекомендуется для большинства сайтов; требуется большинством законов
• Уровень AAA — идеальный, но необязательный; очень высокий стандарт

Основные требования уровня A:

• У всех изображений есть альтернативный текст
• У всех аудиозаписей есть расшифровка или подписи
• Содержимое не мерцает чаще 3 раз в секунду (риск приступа)
• Пользователи могут приостанавливать, останавливать или скрывать движущееся содержимое
• Все функции доступны с клавиатуры

Требования уровня AA (стандартная целевая планка):

• Коэффициент контрастности текста: не менее 4.5:1
• Индикаторы фокуса элементов интерфейса видимы
• Увеличение текста до 200% не нарушает макет
• У форм есть корректные подписи
• Сообщения об ошибках указывают на ошибки и описывают их
• Навигация согласована между страницами

Требования уровня AAA (желаемый ориентир):

• Коэффициент контрастности текста: не менее 7:1
• Перевод аудиосодержимого на жестовый язык
• Уровень чтения: не выше уровня 9-го класса
• Когнитивная нагрузка сведена к минимуму
• Тайм-ауты сеанса можно отключить

Законы о доступности веб-сайтов в разных странах:

• USA — ADA (Закон о защите прав американцев с инвалидностью), раздел 508 (федеральный)
• EU — Европейский закон о доступности (EAA) — вступает в силу в 2025 году
• UK — Закон о равенстве 2010 года, правила для государственного сектора
• Канада — AODA, ACA
• Австралия — DDA (Закон о дискриминации по признаку инвалидности)

Доступные сайты полезны всем:

• Подписи помогают в шумной обстановке
• Хорошая цветовая контрастность помогает при ярком солнечном свете
• Навигация с клавиатуры помогает опытным пользователям
• Понятный язык помогает тем, для кого язык не является родным
• 15% пользователей имеют инвалидность — это значительный рынок

Как начать создавать доступные сайты:

1. Правильно используйте семантические элементы HTML
2. Проверьте сайт с клавиатурой: можете ли Вы пользоваться им без мыши?
3. Проверьте коэффициенты контрастности с помощью WebAIM Contrast Checker
4. Добавьте альтернативный текст ко всем значимым изображениям
5. Запустите проверку доступности Lighthouse
6. Проверьте сайт с помощью бесплатной программы чтения с экрана (NVDA или VoiceOver)

Какой уровень соответствия WCAG чаще всего требуется законами о доступности?

Основные сведения о WCAG:

• POUR: воспринимаемость, управляемость, понятность, надёжность
• Уровень A — минимальный; ему необходимо соответствовать
• Уровень AA — рекомендуется; требуется большинством законов
• Уровень AAA — идеальный; не требуется для всего сайта
• Начните с семантического HTML, навигации с клавиатуры и альтернативного текста