Настройка локали

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

Подключение локалей

Axe-core поддерживает несколько языков локализации, включая английский (en), французский (fr), испанский (es), немецкий (de) и многие другие. Для использования локали необходимо загрузить соответствующие файлы с переводами и подключить их к экземпляру Axe:

import axe from 'axe-core';
import enMessages from 'axe-core/locales/en.json';
import ruMessages from 'axe-core/locales/ru.json';

// Установка локали по умолчанию
axe.configure({
  locale: 'ru',
  locales: { en: enMessages, ru: ruMessages }
});

В данном примере локаль устанавливается на русский язык (ru), а набор локалей содержит английский и русский переводы. Любая проверка, выполненная после конфигурации, будет возвращать результаты на выбранном языке.

Структура объектов локалей

Локали в Axe-core представлены в формате JSON и имеют иерархическую структуру:

  • ruleId — уникальный идентификатор правила проверки.
  • description — текстовое описание правила.
  • help — справочная информация о том, как исправить нарушение.
  • impact — уровень воздействия (minor, moderate, serious, critical).

Пример структуры локали для русского языка:

{
  "image-alt": {
    "description": "Каждое изображение должно иметь атрибут alt",
    "help": "Добавьте атрибут alt к изображению, чтобы описать его содержимое",
    "impact": "serious"
  }
}

Каждое правило может содержать дополнительные поля, такие как tags для фильтрации или helpUrl для предоставления ссылки на документацию.

Динамическая смена локали

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

// Смена локали на английский
axe.configure({ locale: 'en' });

// Проверка доступности с новой локалью
axe.run(document).then(results => {
  console.log(results.violations);
});

При смене локали библиотека автоматически подтягивает соответствующие сообщения для всех правил.

Настройка локали для браузерного и серверного окружения

В браузере локали подключаются через стандартный импорт JSON или через <script> с использованием глобального объекта axe. Пример:

<script src="axe.min.js"></script>
<script src="locales/ru.json"></script>
<script>
  axe.configure({
    locale: 'ru',
    locales: { ru: window.axeLocales.ru }
  });
</script>

На сервере (Node.js) используется импорт JSON-файлов, как показано в примере выше. Важно убедиться, что все используемые локали доступны на сервере, иначе при запуске проверки возникнет ошибка.

Пользовательские локали

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

const customLocale = {
  'image-alt': {
    description: 'Все изображения должны содержать альтернативный текст',
    help: 'Добавьте alt-атрибут с описанием изображения',
    impact: 'serious'
  }
};

axe.configure({
  locale: 'custom',
  locales: { custom: customLocale }
});

Это позволяет адаптировать библиотеку под специфические требования проекта или корпоративные стандарты.

Практические рекомендации

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

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

Оглавление