HTML и селекторы

Axe-core — это мощная библиотека для автоматического тестирования доступности веб-страниц. Она предоставляет API для анализа DOM и выявления проблем с доступностью, таких как отсутствие альтернативного текста, неправильная семантика элементов или проблемы с контрастностью. Работа с библиотекой начинается с установки и подключения, после чего можно использовать её возможности как в браузерных средах, так и в Node.js.

Подключение Axe-core

Для браузерных проектов используется пакет через npm:

import axe from 'axe-core';

axe.run(document, (err, results) => {
  if (err) throw err;
  console.log(results.violations);
});

Для Node.js можно интегрировать Axe с инструментами тестирования, например, с Puppeteer или Playwright. Важно понимать, что Axe анализирует именно рендеренный DOM, поэтому скрипты должны выполняться после полной загрузки страницы.

Использование HTML-селекторов

Axe-core оперирует DOM-элементами, что делает селекторы ключевым инструментом для точечного тестирования. Основные принципы работы с селекторами:

  • CSS-селекторы позволяют ограничить область анализа конкретными элементами. Например:
axe.run(document.querySelector('#main-content'), (err, results) => {
  if (err) throw err;
  console.log(results.violations);
});
  • Селекторы атрибутов используются для точечного выбора элементов по специфическим признакам:
axe.run(document.querySelectorAll('[role="button"]'), (err, results) => {
  if (err) throw err;
  console.log(results.violations);
});
  • Группировка селекторов позволяет объединять несколько областей проверки:
axe.run(document.querySelectorAll('#header, #footer, .sidebar'), (err, results) => {
  if (err) throw err;
  console.log(results.violations);
});

Настройка правил и исключений

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

const options = {
  runOnly: {
    type: 'tag',
    values: ['wcag2a', 'wcag2aa']
  },
  rules: {
    'color-contrast': { enabled: false }
  }
};

axe.run(document, options, (err, results) => {
  if (err) throw err;
  console.log(results.violations);
});
  • runOnly ограничивает проверку правилами определённого уровня WCAG.
  • rules позволяет отключать или настраивать отдельные правила, например, игнорировать контраст для временных элементов.

Фильтрация результатов по селекторам

После выполнения анализа часто возникает необходимость фильтровать нарушения по определённым частям страницы. Это достигается с помощью селекторов:

axe.run(document, {}, (err, results) => {
  if (err) throw err;
  const mainViolations = results.violations.filter(v =>
    v.nodes.some(node => node.target.includes('#main-content'))
  );
  console.log(mainViolations);
});

Такой подход позволяет сконцентрироваться на ключевых блоках страницы и уменьшить шум в отчётах.

Интеграция с тестовыми фреймворками

Axe-core легко интегрируется с Jest, Mocha и другими инструментами автоматизированного тестирования. Пример использования с Jest:

import { toHaveNoViolations } from 'jest-axe';
import axe from 'axe-core';
expect.extend(toHaveNoViolations);

test('Страница должна быть доступной', async () => {
  const html = '';
  const results = await axe.run(html);
  expect(results).toHaveNoViolations();
});

Использование селекторов позволяет ограничивать тесты только конкретными компонентами, что ускоряет процесс проверки при масштабных проектах.

Динамические элементы и асинхронные проверки

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

setTimeout(() => {
  axe.run(document.querySelector('#dynamic-section'), (err, results) => {
    if (err) throw err;
    console.log(results.violations);
  });
}, 1000);

Для сложных SPA это особенно важно, так как тестирование должно учитывать состояние DOM после выполнения всех скриптов.

Практические советы по работе с селекторами

  • Предпочтение стоит отдавать ID и уникальным классам для минимизации ложных срабатываний.
  • Избегать слишком общих селекторов (div, span), так как это может привести к избыточным результатам.
  • Использовать селекторы атрибутов для проверки специфичных ролей и состояний ([role="dialog"], [aria-hidden="true"]).

Эти практики позволяют создавать точные, воспроизводимые тесты доступности, которые легко поддерживать при изменении структуры страницы.

Оглавление