Данные any, all, none

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

Категория any

any содержит элементы, которые соответствуют хотя бы одному условию правила. Она применяется в случаях, когда правило проверяет наличие хотя бы одного допустимого варианта поведения или свойства элемента.

Пример структуры:

"any": [
  {
    "id": "color-contrast",
    "impact": "serious",
    "nodes": [
      {
        "html": "<button style='color: #000; background: #fff;'>Click me</button>",
        "target": ["#button1"],
        "failureSummary": "Контраст достаточен для видимости текста"
      }
    ]
  }
]

Ключевые моменты:

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

Категория all

all объединяет элементы, которые соответствуют всем условиям правила одновременно. Эта категория особенно важна для правил, требующих строгого соблюдения нескольких критериев одновременно.

Пример структуры:

"all": [
  {
    "id": "label",
    "impact": "critical",
    "nodes": [
      {
        "html": "<input type='text' id='name' aria-label='Name'>",
        "target": ["#name"],
        "failureSummary": "Элемент имеет корректный label и aria-label"
      }
    ]
  }
]

Особенности категории all:

  • Элемент полностью удовлетворяет всем проверкам правила.
  • Позволяет уверенно маркировать элементы как доступные по всем требованиям конкретного правила.
  • Важна при построении отчётов, когда требуется точная проверка на соблюдение всех стандартов WCAG.

Категория none

none содержит элементы, которые не соответствуют ни одному условию правила. Эта категория отражает полный отказ элемента от соблюдения требований, что делает её критической для анализа и исправления проблем доступности.

Пример структуры:

"none": [
  {
    "id": "image-alt",
    "impact": "serious",
    "nodes": [
      {
        "html": "<img src='logo.png'>",
        "target": ["#logo"],
        "failureSummary": "Элемент изображения не имеет атрибута alt"
      }
    ]
  }
]

Характерные особенности none:

  • Элемент полностью не удовлетворяет правилу.
  • Используется для определения элементов с наибольшим приоритетом исправления.
  • Позволяет быстро идентифицировать критические нарушения доступности, влияющие на пользователей с ограниченными возможностями.

Работа с категориями в JavaScript

Для обработки результатов сканирования Axe-core применяются методы работы с объектом results. Пример:

import axe from 'axe-core';

axe.run(document, {}, (err, results) => {
  if (err) throw err;

  // Элементы, соответствующие хотя бы одному условию
  console.log('Any:', results.violations.filter(v => v.any.length > 0));

  // Элементы, полностью соответствующие правилам
  console.log('All:', results.violations.filter(v => v.all.length > 0));

  // Элементы, не соответствующие ни одному условию
  console.log('None:', results.violations.filter(v => v.none.length > 0));
});

Пояснения к использованию:

  • results.violations — массив объектов, каждый из которых представляет собой конкретное правило.
  • Свойства any, all, none содержат массивы узлов (nodes), к которым применимо данное правило.
  • Фильтрация по длине массивов позволяет классифицировать элементы по категориям для последующего анализа и генерации отчётов.

Практическая ценность

Использование категорий any, all и none позволяет:

  1. Приоритизировать исправления: сначала исправляются элементы из none, затем элементы частичного соответствия из any.
  2. Анализировать сложные правила: для правил с множественными условиями легко определить, какие элементы полностью соответствуют, а какие — частично.
  3. Автоматизировать отчётность: категории упрощают генерацию визуальных отчётов с разделением на «соответствующие», «частично соответствующие» и «нарушающие» элементы.

Эта структура данных является фундаментальной при интеграции Axe-core в процессы CI/CD, тестирования пользовательского интерфейса и обеспечения соответствия стандартам доступности WCAG 2.1 и выше. Правильная интерпретация any, all, none обеспечивает точный и эффективный анализ нарушений доступности на веб-страницах.

Оглавление