Установка через npm

Для использования Axe-core в проектах на JavaScript оптимальным способом является установка через npm. Эта библиотека предоставляет инструменты для автоматизированной проверки доступности веб-страниц и компонентов, что делает интеграцию с существующим фронтенд-кодом простой и гибкой.

Подготовка проекта

Перед установкой необходимо убедиться, что проект инициализирован как npm-проект. Проверка выполняется командой:

npm init -y

Эта команда создаёт файл package.json с базовыми настройками, который нужен для управления зависимостями.

Установка Axe-core

Установка выполняется одной командой:

npm install axe-core --save
  • axe-core — основной пакет библиотеки.
  • --save добавляет зависимость в package.json (для современных версий npm это делается автоматически, поэтому флаг можно опустить).

После установки библиотека доступна в проекте через стандартный импорт:

import axe from 'axe-core';

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

const axe = require('axe-core');

Проверка доступности библиотеки

Чтобы убедиться, что установка прошла корректно, можно выполнить простую проверку:

console.log(axe.version);

Если библиотека корректно установлена, будет выведена текущая версия Axe-core.

Установка дополнительных пакетов

Для интеграции с браузером через тесты или автоматизацию часто используют следующие пакеты:

  • axe-core/playwright — для работы с фреймворком Playwright и автоматизации проверки UI.
  • axe-core/puppeteer — для интеграции с Puppeteer и headless-браузерами.

Установка выполняется так же через npm:

npm install axe-core puppeteer --save-dev

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

Использование с фронтенд-фреймворками

React и Vue не требуют отдельной установки, достаточно подключить axe-core через npm. Примеры:

// React
import React, { useEffect } from 'react';
import axe from 'axe-core';

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

  return <div>Пример использования Axe-core</div>;
}

export default App;
// Vue
import { onMounted } from 'vue';
import axe from 'axe-core';

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

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

npm позволяет поддерживать библиотеку в актуальном состоянии с помощью команды:

npm update axe-core

Регулярное обновление важно, так как Axe-core активно развивается и исправляет новые случаи нарушений доступности.

Итоговая структура

После установки и базовой интеграции проект будет иметь следующую структуру:

project/
├─ node_modules/
│  └─ axe-core/
├─ package.json
├─ package-lock.json
├─ src/
│  └─ index.js

Это обеспечивает удобный доступ к API библиотеки и возможность подключать её к любым тестовым и фронтенд-процессам.

Axe-core через npm обеспечивает гибкость и стандартизированное управление зависимостями, позволяя интегрировать проверки доступности напрямую в рабочий процесс разработки.

Оглавление