Применение в Svelte

Для интеграции библиотеки Axe-core в проект на Svelte сначала необходимо установить пакет через npm или yarn:

npm install axe-core --save-dev

или

yarn add axe-core --dev

После установки библиотеку можно импортировать в компонент Svelte или в отдельный модуль для тестирования:

import axe from 'axe-core';

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

import { onMount } from 'svelte';
import axe from 'axe-core';

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

Основные функции и возможности

Axe-core предоставляет следующие ключевые возможности:

  • Проверка доступности элементов DOM по стандартам WCAG 2.1.
  • Подробные отчеты о нарушениях, включая селектор элемента, тип нарушения и рекомендации по исправлению.
  • Поддержка кастомизации правил, что позволяет включать или отключать конкретные проверки.
  • Асинхронное выполнение, минимизирующее влияние на пользовательский интерфейс.

Каждая проверка возвращает объект results, который содержит три основных поля:

  1. violations – список найденных проблем.
  2. passes – элементы, которые прошли все проверки.
  3. incomplete – элементы, проверка которых не была завершена из-за ограничений Axe-core.

Пример обработки результатов:

axe.run(document, {}, (err, results) => {
  if (err) throw err;
  results.violations.forEach(v => {
    console.warn(`Нарушение: ${v.id}`);
    v.nodes.forEach(node => {
      console.log(`Элемент: ${node.target}`);
      console.log(`Рекомендации: ${node.failureSummary}`);
    });
  });
});

Интеграция с компонентами Svelte

В Svelte компоненты могут динамически добавляться в DOM, поэтому важно запускать Axe-core после рендера всех элементов. Наиболее удобный способ — использовать onMount или подписываться на обновления с помощью afterUpdate:

import { onMount, afterUpdate } from 'svelte';
import axe from 'axe-core';

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

onMount(() => {
  runAxe();
});

afterUpdate(() => {
  runAxe();
});

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

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

Axe-core позволяет гибко настраивать проверки:

  • Отключение конкретных правил:
const options = {
  rules: {
    'color-contrast': { enabled: false },
    'image-alt': { enabled: true }
  }
};

axe.run(document, options, (err, results) => {
  console.log(results.violations);
});
  • Фильтрация по элементам DOM:
const options = {
  include: [['#app']],  // Проверка только внутри элемента с id="app"
  exclude: [['.ignore']] // Исключить элементы с классом .ignore
};
  • Настройка уровня соответствия стандартам WCAG:
const options = {
  runOnly: {
    type: 'tag',
    values: ['wcag2aa', 'wcag21aa']
  }
};

Эти возможности особенно полезны при тестировании крупных приложений на Svelte, где не все компоненты должны проверяться одновременно.

Автоматизация тестирования

Для проектов с CI/CD интеграция Axe-core в автоматические тесты повышает качество и соответствие стандартам доступности. Обычно это делается через Jest или Playwright. Пример с Jest:

import axe from 'axe-core';
import { render } from '@testing-library/svelte';
import Component from './Component.svelte';

test('Компонент соответствует стандартам доступности', async () => {
  const { container } = render(Component);
  const results = await axe.run(container);
  expect(results.violations).toHaveLength(0);
});

Такой подход позволяет выявлять нарушения автоматически при каждом коммите или pull request, не полагаясь на ручную проверку.

Советы по применению в Svelte

  • Проверку лучше запускать после полной отрисовки интерфейса, особенно если используются динамические данные.
  • В крупных приложениях стоит разбивать тестирование на модули, чтобы анализ DOM не занимал много времени.
  • Использовать опции include и exclude для точной настройки области проверки.
  • Хранить результаты в формате JSON для интеграции с системами отчетности или визуализации.

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

Оглавление