Интеграция с Vue.js

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

npm install axe-core --save-dev
# или
yarn add axe-core --dev

После установки подключение зависит от контекста использования. В среде Vue.js чаще всего интеграцию проводят в компоненте или плагине, чтобы проверки выполнялись в момент монтирования компонентов или во время тестов.

Пример простого подключения в компоненте:

import axe from 'axe-core';

export default {
  mounted() {
    axe.run(this.$el, {}, (err, results) => {
      if (err) throw err;
      console.log(results.violations);
    });
  }
}

Здесь $el — это корневой элемент компонента, который проверяется на доступность.

Настройка Axe-core для Vue.js

axe-core предоставляет возможность детальной настройки. Ключевые параметры конфигурации:

  • rules — включение или отключение отдельных правил проверки.

    axe.run(this.$el, {
  rules: {
    'color-contrast': { enabled: false }, // отключение проверки контраста
    'label': { enabled: true }            // включение проверки наличия label
  }
});

  • checks — низкоуровневые проверки. Позволяет модифицировать поведение конкретных проверок.

  • reporter — возможность формировать отчет в различных форматах (например, JSON).

Для проектов на Vue 3 часто удобно создавать отдельный плагин, чтобы интеграция была централизованной и применялась ко всем компонентам.

Создание плагина Vue для Axe-core

import { App } from 'vue';
import axe from 'axe-core';

export default {
  install(app: App) {
    app.config.globalProperties.$runAxe = (el = document.body) => {
      axe.run(el, {}, (err, results) => {
        if (err) throw err;
        console.table(results.violations);
      });
    };
  }
}

Использование плагина в компонентах:

export default {
  mounted() {
    this.$runAxe(this.$el);
  }
}

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

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

Для проектов с Vue Test Utils можно подключить axe-core в юнит-тестах:

import { mount } from '@vue/test-utils';
import axe from 'axe-core';
import MyComponent from '@/components/MyComponent.vue';

test('доступность компонента', async () => {
  const wrapper = mount(MyComponent);
  const results = await axe.run(wrapper.element);
  expect(results.violations).toHaveLength(0);
});

Особенности при тестировании:

  • Проверка должна выполняться после того, как компонент полностью смонтирован и DOM обновлен.
  • Для асинхронных компонентов рекомендуется использовать nextTick из Vue.
  • В отчетах можно фильтровать только критические нарушения для ускорения CI.

Поддержка динамических компонентов и слотов

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

  • Проверка должна выполняться после всех v-if и v-for рендеров.
  • Для элементов, добавляемых динамически через слоты, необходимо вызывать axe.run после монтирования дочерних элементов.

Пример:

import { nextTick } from 'vue';

export default {
  mounted() {
    nextTick(() => {
      axe.run(this.$el, {}, (err, results) => {
        if (err) throw err;
        console.log(results.violations);
      });
    });
  }
}

Генерация и обработка отчетов

Axe-core возвращает объект с результатами, который включает:

  • violations — массив нарушений с подробным описанием проблемы, элементами, где обнаружено нарушение, и рекомендациями.
  • passes — элементы, прошедшие проверку.
  • incomplete — проверки, не завершившиеся из-за ограничений DOM.

Пример форматирования отчета:

axe.run(document.body).then(results => {
  results.violations.forEach(v => {
    console.log(`Правило: ${v.id}`);
    console.log(`Описание: ${v.description}`);
    v.nodes.forEach(node => {
      console.log(`Элемент: ${node.target}`);
      console.log(`Сообщение: ${node.failureSummary}`);
    });
  });
});

Это позволяет интегрировать отчеты в CI/CD, например, отправляя их в Slack или формируя HTML-отчеты.

Советы по оптимизации

  • Использовать context для ограничения области проверки. Например, проверять только конкретный компонент вместо всего документа.
  • Отключать менее критичные правила для ускорения локальной разработки.
  • В больших проектах имеет смысл комбинировать проверку Axe-core с визуальными тестами, чтобы выявлять скрытые нарушения доступности.

Axe-core в связке с Vue.js предоставляет мощный инструмент для интеграции доступности на всех этапах разработки — от локальных компонентов до автоматизированного тестирования. Структурированная настройка правил и отчетов позволяет держать проект в соответствии с современными стандартами доступности.

Оглавление