Теги и стандарты WCAG

Axe-core — это библиотека для автоматизированного тестирования доступности веб-контента на основе стандартов WCAG (Web Content Accessibility Guidelines). Она позволяет выявлять проблемы доступности на страницах, включая контраст текста, использование семантических элементов, альтернативный текст для изображений, фокусировку элементов и соответствие ARIA-атрибутов. Библиотека интегрируется с различными инструментами разработки, включая браузерные расширения, фреймворки для тестирования (Jest, Cypress) и Node.js.

Основные принципы работы с тегами и элементами

Axe-core использует DOM-структуру страницы, анализируя каждый элемент на соответствие критериям доступности. Важнейшими аспектами являются:

  • Семантические HTML-теги: правильное использование <header>, <nav>, <main>, <section>, <article>, <footer> улучшает навигацию для экранных читалок.
  • ARIA-атрибуты: role, aria-label, aria-labelledby, aria-hidden помогают корректно обозначить элементы интерфейса, недоступные стандартным тегам.
  • Фокус и интерактивные элементы: кнопки, ссылки и поля форм должны быть доступными через клавиатуру (tabindex), иметь правильное поведение при фокусе и визуальные индикаторы.

Поддержка WCAG

Axe-core проверяет соответствие нескольким уровням стандартов WCAG 2.1:

  • A (Базовый): минимальные требования для базовой доступности. Примеры — корректный alt для изображений, текстовые метки для форм.
  • AA (Средний): обеспечивает удобство использования для большинства пользователей, включая контрастность текста, уникальные идентификаторы элементов, правильную структуру заголовков.
  • AAA (Высокий): расширенные рекомендации для пользователей с особыми потребностями, включая дополнительные текстовые альтернативы и более строгие правила контрастности.

Настройка и использование Axe-core

Установка

npm install axe-core --save-dev

Для использования в Node.js или браузерном окружении подключается через require или import.

import axe from 'axe-core';

Инициализация и запуск анализа

В браузере:

axe.run(document, {
  runOnly: {
    type: 'tag',
    values: ['wcag2a', 'wcag2aa']
  }
}).then(results => {
  console.log(results.violations);
});
  • document — DOM-узел или вся страница.
  • runOnly.type = 'tag' ограничивает проверку определёнными тегами или стандартами WCAG.
  • results.violations содержит массив объектов с детальной информацией о нарушениях.

Настройка тегов

Axe-core использует теги, чтобы классифицировать правила проверки. Например:

  • wcag2a — правила уровня A
  • wcag2aa — правила уровня AA
  • wcag2aaa — правила уровня AAA
  • section508 — соответствие американскому стандарту Section 508

Каждое правило содержит:

  • id — уникальный идентификатор проверки
  • impact — степень важности (critical, serious, moderate, minor)
  • tags — список тегов (например, wcag2aa, aria, color-contrast)
  • description — описание правила
  • help и helpUrl — рекомендации по исправлению

Пример фильтрации по тегам

axe.run(document, {
  rules: {
    'color-contrast': { enabled: true },
    'image-alt': { enabled: true }
  }
}).then(results => {
  results.violations.forEach(v => {
    console.log(`Нарушение: ${v.id}`);
    console.log(`Теги: ${v.tags.join(', ')}`);
    console.log(`Описание: ${v.description}`);
  });
});

Интерпретация результатов

Результаты Axe-core представлены в виде объектов:

  • violations — элементы, нарушающие правила доступности
  • passes — элементы, успешно прошедшие проверку
  • incomplete — элементы, проверка по которым не завершена из-за динамических или нестандартных условий
  • inapplicable — элементы, к которым правило не применимо

Каждое нарушение включает информацию о:

  • пути к элементу в DOM (target)
  • рекомендациях по исправлению (nodes[].failureSummary)
  • тегах и уровне WCAG

Интеграция с тестированием

Axe-core удобно интегрировать с Jest, Cypress или другими фреймворками для автоматического тестирования доступности:

Пример с Jest

import axe from 'axe-core';
import { render } from '@testing-library/react';

test('компонент соответствует WCAG', async () => {
  const { container } = render(<MyComponent />);
  const results = await axe.run(container);
  expect(results.violations).toHaveLength(0);
});

Пример с Cypress

cy.visit('/my-page');
cy.injectAxe();
cy.checkA11y(null, {
  runOnly: {
    type: 'tag',
    values: ['wcag2aa']
  }
});

Рекомендации по работе с тегами

  1. Всегда использовать семантические HTML-элементы.
  2. Проверять все интерактивные элементы на корректную фокусировку и видимость.
  3. Добавлять alt и ARIA-атрибуты для элементов, которые не поддерживаются стандартными тегами.
  4. Применять фильтрацию по тегам Axe-core для приоритизации исправления критических нарушений WCAG.

Практические советы

  • Сконцентрироваться на уровне AA, как основном для большинства проектов.
  • Настраивать Axe-core на определённые теги, чтобы ускорить проверку и снизить шум от менее значимых нарушений.
  • Использовать результаты для автоматического CI/CD-тестирования, чтобы гарантировать, что новые изменения не нарушают доступность.

Axe-core обеспечивает комплексный контроль над доступностью через теги WCAG, позволяя выявлять проблемы ещё на этапе разработки и поддерживать веб-приложения в соответствии с международными стандартами.

Оглавление