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

WCAG — международные рекомендации по доступности веб-содержимого. Для вуза это удобная отправная точка: не нужно изобретать свои правила, достаточно пройти по критериям.

Разберём минимальный набор уровня AA, который закрывает большинство проблем учебной страницы.

Уровни и версии

A — базовый уровень.
AA — практический стандарт, чаще всего требуется.
AAA — повышенный, редко обязателен целиком.

Актуальная версия — WCAG 2.2, она включает критерии 2.0 и 2.1 (W3C WAI).

Четыре принципа

Воспринимаемость — информация представлена так, что её можно воспринять.
Управляемость — интерфейсом можно пользоваться разными способами.
Понятность — поведение предсказуемо, ошибки объяснены.
Надёжность — страница работает с разными технологиями.

Критерии, которые чаще всего нарушают

1.1.1 Нетекстовый контент. У изображений есть alt-текст, у декоративных — пустой атрибут.

1.2.2 Субтитры. Видео с речью сопровождается субтитрами.

1.3.1 Информация и взаимосвязи. Заголовки, списки и таблицы размечены, а не нарисованы.

1.4.3 Контраст. 4,5:1 для обычного текста, 3:1 для крупного.

1.4.4 Изменение размера текста. Текст масштабируется до 200 % без потерь.

2.1.1 Клавиатура. Всё управляется без мыши.

2.4.3 Порядок фокуса. Переход по Tab логичен.

2.4.7 Видимый фокус. Понятно, где находится пользователь.

3.3.1 Идентификация ошибки. Ошибка описана текстом.

3.3.2 Метки или инструкции. У полей есть подписи.

Чего достаточно для старта

Заголовки — настоящими тегами h1–h3.
Один h1 на страницу.
Alt-текст у всех значимых изображений.
Контраст проверить чекером.
Все действия доступны с клавиатуры.
Видео — с субтитрами.
Ссылки подписаны осмысленно.
Формы имеют подписи.
Нет автоматического воспроизведения со звуком.
Язык страницы указан.

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

Ссылки и кнопки

«Подробнее» — плохо, «Скачать программу курса» — хорошо.
Ссылка должна быть понятна вне контекста.
Кнопка-иконка нуждается в подписи.
Открытие в новой вкладке — предупредите.

Формы

Подпись связана с полем.
Обязательные поля помечены текстом, а не только цветом.
Ошибки появляются рядом с полем.
Подсказка не исчезает при вводе.
Автозаполнение не мешает.

Таблицы

Есть заголовки строк и столбцов.
Нет объединённых ячеек без необходимости.
Таблица не используется для вёрстки.
Для сложных таблиц добавлено описание.

Мультимедиа

Субтитры — для записей с речью.
Расшифровка — как дополнение.
Аудио без видео — с расшифровкой.
Автозапуск звука отключён.

Документы

PDF и Word-файлы тоже часть страницы. Если они недоступны, критерии не выполнены, даже если сама страница идеальна.

Как проверить быстро

Пройдите страницу с клавиатуры.
Включите экранный диктор.
Увеличьте масштаб до 200 %.
Проверьте контраст.
Просмотрите страницу без изображений.
Отключите звук.

Полный чек-лист удобно вести по WebAIM (WebAIM) или официальному quickref (W3C WAI).

Если закупаете платформу

Запросите у поставщика Accessibility Conformance Report — документ о соответствии (Section508.gov). Это быстрее, чем проверять всё самостоятельно.

Что спрашивать у поставщика LMS

Есть ли отчёт о соответствии WCAG.
Какая версия и уровень заявлены.
Какие критерии не выполняются.
Есть ли план исправлений.
Поддерживается ли клавиатурная навигация.
Работает ли платформа с экранными дикторами.
Как сообщать о проблемах.

Ответы стоит зафиксировать письменно.

Приоритеты внедрения

Доступность записей и документов.
Клавиатурная навигация.
Контраст и масштабирование.
Формы и сообщения об ошибках.
Структура страниц.
Мультимедиа.

Начинайте с того, что блокирует учёбу.

Документирование исключений

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

опишите ограничение;
укажите причину;
предложите альтернативу;
назначьте срок пересмотра;
сохраните запись.

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

Простая проверка своими силами

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

Мультимедиа и анимация

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

Типичные ошибки вузов

красивый, но недоступный шаблон курса;
PDF-конспекты без тегов;
тесты с таймером без альтернативы;
видео без субтитров;
формы без подписей;
ссылки «подробнее».

Их исправление обычно дешевле, чем кажется.

Как вести работу постоянно

Включите проверку в шаблон курса.
Обучите методистов базовым критериям.
Добавьте пункт в приёмку материала.
Ведите журнал замечаний.
Пересматривайте его раз в семестр.

Итог

Минимальный набор требований WCAG для учебной страницы невелик: структура, alt-текст, контраст, клавиатура, субтитры и подписанные формы. Этого достаточно, чтобы курс стал пригоден для большинства студентов.

Как объяснить требования коллегам

Проще всего начать с трёх вопросов:

Можно ли пройти урок без мыши?
Поймёт ли студент задание без звука?
Прочитает ли он текст при увеличении?

Если на все три ответа «да», базовая доступность уже есть. Остальное — уточнения.

Кому это важно

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

Чек-лист

Заголовки размечены.
Alt-текст есть.
Контраст проверен.
Клавиатура работает.
Фокус виден.
Субтитры включены.
Формы подписаны.
PDF доступны.

Частые вопросы

Нужен ли уровень AAA?

Обычно нет. Достаточно AA, а AAA — по мере возможностей.

Обязателен ли WCAG по закону?

Зависит от страны и типа организации. Во многих юрисдикциях требования к госсектору и образованию близки к AA.

Что делать, если LMS не соответствует?

Зафиксируйте замечания, запросите план исправлений и предусмотрите альтернативу.

Хватит ли автоматической проверки?

Нет, она ловит лишь часть проблем. Нужны ручные проверки.