Структура объекта violation

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

Основные свойства объекта violation

Объект violation представляет собой JavaScript-объект с набором стандартных полей:

  1. id Уникальный идентификатор правила, которое было нарушено. Обычно совпадает с названием правила в стандартной библиотеке Axe-core. Пример:

    "id": "color-contrast"

  2. impact Уровень серьезности нарушения. Возможные значения:

    • critical — критическое нарушение, требует немедленного исправления.
    • serious — серьёзное нарушение, может существенно повлиять на доступность.
    • moderate — умеренное нарушение.
    • minor — незначительное нарушение, часто косметического характера.

  3. description Краткое текстовое описание нарушения, поясняющее его суть. Обычно формулируется в контексте доступности для пользователей с ограниченными возможностями.

  4. help Короткая строка с наглядным объяснением того, что не так. Часто используется для отображения в интерфейсе инструментов разработчика.

  5. helpUrl Ссылка на официальную документацию или страницу с рекомендациями по исправлению конкретного нарушения. Пример:

    "helpUrl": "https://dequeuniversity.com/rules/axe/4.5/color-contrast"

  6. nodes Массив объектов, каждый из которых соответствует конкретному элементу DOM, где обнаружено нарушение. Это одно из наиболее информативных полей.

Структура объектов в массиве nodes

Каждый объект в nodes содержит несколько ключевых полей:

  1. target Массив селекторов CSS, однозначно идентифицирующих элемент на странице. Пример:

    "target": ["#submit-button", ".form-control"]

  2. html Строка с HTML-разметкой элемента, в котором выявлено нарушение. Полезно для быстрой визуальной проверки.

  3. failureSummary Подробное текстовое объяснение того, почему данный элемент нарушает правило. Может включать рекомендации и конкретные значения атрибутов.

  4. any Массив объектов, описывающих частичные нарушения правила. Каждый объект содержит:

    • id — идентификатор подправила.
    • impact — серьёзность.
    • message — объяснение конкретного нарушения.

  5. all Массив объектов, которые описывают элементы, полностью подпадающие под правило. Используется для правил, которые требуют соблюдения всех условий сразу.

  6. none Пустой массив или объекты для элементов, которые не нарушают ни одно из условий правила. Используется для полной структуры анализа.

  7. any и all vs none Эти три поля помогают различать нарушения, которые могут быть частичными (any), обязательными (all) или отсутствующими (none).

Пример полного объекта violation

{
  "id": "color-contrast",
  "impact": "critical",
  "description": "Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds",
  "help": "Fix color contrast",
  "helpUrl": "https://dequeuniversity.com/rules/axe/4.5/color-contrast",
  "nodes": [
    {
      "target": ["#submit-button"],
      "html": "<button id='submit-button'>Submit</button>",
      "failureSummary": "This element has insufficient color contrast of 2.5 (foreground color: #888888, background color: #ffffff). Expected contrast ratio of 4.5:1",
      "any": [
        {
          "id": "color-contrast",
          "impact": "critical",
          "message": "Element has insufficient color contrast"
        }
      ],
      "all": [],
      "none": []
    }
  ]
}

В этом примере видно, что объект violation содержит полную информацию о проблеме: идентификатор правила, уровень серьёзности, ссылки на документацию, и точные элементы DOM, где нарушение проявляется.

Применение структуры violation в практике

  • Автоматизация отчётов по доступности. Объект violation легко сериализуется в JSON и используется для генерации отчётов.
  • Интеграция с CI/CD. Можно настроить скрипты на JavaScript для анализа страниц и блокировки релизов при обнаружении критических нарушений.
  • Визуальная диагностика. nodes позволяет быстро найти элементы с проблемами и исправить их без ручного аудита всей страницы.

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

Оглавление