Поддержка мультиязычности

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

Локализация сообщений об ошибках

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

  • Использование метода axe.configure() позволяет задать локализацию для сообщений:
axe.configure({
  locale: 'ru', // установка русского языка
});
  • Axe-core поддерживает ряд встроенных локалей: 'en', 'fr', 'de', 'es', 'ru' и другие.
  • Локаль влияет на поля description, help, helpUrl в результатах тестирования.

Особенность: локаль применяется только к текстовым сообщениям. Коды правил (ruleId) и результаты тестов остаются неизменными, что упрощает автоматическую обработку данных.

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

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

axe.configure({
  locales: {
    'ru': {
      'image-alt': {
        description: 'Элемент изображения должен иметь альтернативный текст.',
        help: 'Добавить атрибут alt к изображению для улучшения доступности.'
      }
    }
  },
  locale: 'ru'
});
  • Каждое правило можно настроить отдельно, включая description и help.
  • Пользовательская локаль имеет приоритет над встроенными, что позволяет полностью контролировать язык сообщений.

Мультиязычные страницы и атрибут lang

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

<html lang="ru">
<body>
  <p>Пример текста на русском языке.</p>
</body>
</html>
  • Если страница содержит блоки на разных языках, рекомендуется указывать lang для каждого блока:
<p lang="en">Text in English.</p>
<p lang="ru">Текст на русском.</p>
  • Axe-core автоматически подбирает корректные проверки в зависимости от указанного языка, что повышает точность анализа и рекомендации по исправлению нарушений.

Применение мультиязычных правил

Некоторые правила Axe-core адаптированы под языковые особенности:

  1. image-alt — проверяет наличие альтернативного текста для изображений. Рекомендации корректируются под язык, указанный в lang.
  2. label — проверяет соответствие меток и элементов форм. Текст подсказок адаптируется под локаль.
  3. document-title — оценивает заголовок документа; рекомендации учитывают языковую семантику и длину текста в контексте конкретного языка.

Использование мультиязычных правил позволяет создавать тесты, которые не просто формально проверяют наличие элементов, но и адаптированы к семантической и культурной специфике языка.

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

В приложениях на React, Vue или Angular Axe-core можно интегрировать с учетом мультиязычности:

import axe from 'axe-core';
import { render } from '@testing-library/react';
import App from './App';

const { container } = render(<App />);
axe.run(container, { locale: 'ru' }).then(results => {
  console.log(results.violations);
});
  • Локаль передается как опция при запуске axe.run().
  • Для динамического изменения языка интерфейса достаточно обновить axe.configure({ locale }).

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

Настройка вывода результатов

Для мультиязычных приложений рекомендуется использовать форматирование результатов с учетом локали:

results.violations.forEach(v => {
  console.log(`${v.help} (${v.id})`);
});
  • v.help выводится на языке, соответствующем locale.
  • Это упрощает интеграцию с внутренними отчетами или системами CI/CD, где требуется анализ нарушений на языке команды разработки или заказчика.

Автоматическое переключение языков

Для сайтов с динамическим контентом можно реализовать автоматическое определение языка страницы:

const lang = document.documentElement.lang || 'en';
axe.configure({ locale: lang });
axe.run().then(console.log);
  • Позволяет тестировать страницы на разных языках без ручной смены конфигурации.
  • Обеспечивает точное соответствие рекомендаций языку контента, что критично для соблюдения стандартов WCAG.

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

Оглавление