Уровни соответствия A, AA, AAA

Библиотека Axe-core — это мощный инструмент для автоматизированной проверки доступности веб-приложений. Одним из ключевых аспектов является поддержка стандартов WCAG (Web Content Accessibility Guidelines), где различают три уровня соответствия: A, AA и AAA. Эти уровни определяют строгость требований и охват проблем доступности.

Уровень A

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

Основные аспекты:

  • Альтернативный текст для изображений Все значимые изображения должны иметь атрибут alt. Если изображение декоративное — alt должен быть пустым (alt=""). Axe-core выявляет отсутствие или некорректное использование этого атрибута.

  • Фокус и навигация с клавиатуры Элементы управления должны быть доступными с клавиатуры. Это включает ссылки, кнопки, формы. Axe-core проверяет возможность перемещения фокуса между интерактивными элементами.

  • Использование семантических элементов Ключевые элементы (header, main, nav, footer, button, input) должны использоваться по назначению. Нарушения семантики затрудняют работу с экранными читалками.

Примеры правил Axe-core уровня A:

  • image-alt — проверка наличия текста для изображений.
  • label — проверка корректного связывания меток с формами.
  • bypass — проверка наличия способов пропуска повторяющихся блоков навигации.

Уровень AA

Уровень AA является средним уровнем доступности. Соответствие этому уровню обеспечивает более удобную работу с контентом для большинства пользователей, включая людей с нарушениями зрения и моторики.

Ключевые требования:

  • Контраст текста и фона Минимальное отношение контрастности должно составлять 4.5:1 для обычного текста и 3:1 для крупного. Axe-core автоматически измеряет цветовой контраст.

  • Масштабируемость контента Контент должен оставаться читаемым при увеличении масштаба до 200%. Axe-core проверяет возможность масштабирования без потери функциональности.

  • Подписи и субтитры Видео должны содержать субтитры для пользователей с нарушением слуха. В библиотеке есть правила проверки наличия субтитров или описания аудиоконтента.

  • Ясные инструкции для форм Все поля форм должны иметь поясняющие инструкции и ошибки должны быть легко обнаружимы и понятны. Axe-core проверяет корректность aria-describedby и aria-invalid.

Примеры правил Axe-core уровня AA:

  • color-contrast — проверка контрастности текста и фона.
  • video-caption — проверка наличия субтитров.
  • aria-required-attr — проверка обязательных атрибутов ARIA.
  • form-field-multiple-labels — проверка корректного использования меток.

Уровень AAA

Уровень AAA — это наивысший уровень доступности, соблюдение которого обеспечивает комфортное взаимодействие с веб-контентом для всех пользователей, включая людей с серьезными ограничениями.

Особенности уровня AAA:

  • Высокая контрастность Требуется отношение контрастности 7:1 для обычного текста и 4.5:1 для крупного. Axe-core позволяет определить элементы, где контрастность недостаточна.

  • Дополнительные текстовые альтернативы Все мультимедийные элементы должны иметь текстовые альтернативы: аудиодескрипцию для видео и подробные описания изображений.

  • Минимизация анимаций Контент с анимацией должен предоставлять возможность отключения или уменьшения движения. Проверка с Axe-core включает анализ свойств CSS, таких как animation и transition.

  • Поддержка расширенной навигации Пользователи должны иметь возможность быстро перемещаться по страницам и блокам контента, используя заголовки и ARIA-метки.

Примеры правил Axe-core уровня AAA:

  • audio-caption — проверка наличия описания для аудио.
  • heading-order — проверка корректного порядка заголовков.
  • document-title — проверка наличия и уникальности заголовка документа.
  • animation-on-hover — проверка анимаций, вызываемых при наведении.

Практическая работа с уровнями в Axe-core

Для проверки уровня соответствия используется метод axe.run(), который принимает параметры настройки:

import axe from 'axe-core';

axe.run(document, {
  runOnly: {
    type: 'tag',
    values: ['wcag2a', 'wcag2aa', 'wcag2aaa']
  }
}, (err, results) => {
  if (err) throw err;
  console.log(results.violations);
});
  • Параметр values позволяет выбирать уровни WCAG для проверки.
  • Axe-core возвращает список нарушений с указанием идентификатора правила, уровня соответствия, элемента DOM и рекомендаций по исправлению.
  • Можно фильтровать результаты по уровню для приоритизации исправлений, начиная с уровня A, затем AA и AAA.

Визуализация и интеграция

Для упрощения анализа результатов рекомендуется использовать:

  • Консольные отчеты — стандартный вывод console.table(results.violations).
  • Веб-интерфейс — интеграция с Cypress или Jest позволяет автоматически генерировать отчеты при каждом тестировании.
  • CI/CD — включение Axe-core в пайплайн гарантирует, что новые изменения не нарушают уровень соответствия.

Итоговая структура уровней

Уровень Основные требования Примеры правил Axe-core
A Минимальные критические требования image-alt, label, bypass
AA Средний уровень, контраст, масштаб color-contrast, video-caption, aria-required-attr
AAA Наивысший уровень, расширенные альтернативы, контроль анимации audio-caption, heading-order, animation-on-hover

Каждый уровень включает предыдущий, поэтому соблюдение AAA подразумевает выполнение всех требований A и AA. Это обеспечивает постепенное улучшение доступности и позволяет использовать Axe-core как инструмент планомерной оптимизации веб-приложений.

Оглавление