Автоматические проверки WCAG

ally.js — это библиотека JavaScript для повышения доступности веб-приложений, которая предоставляет инструменты для проверки соответствия элементов стандартам WCAG (Web Content Accessibility Guidelines). Она позволяет выявлять потенциальные проблемы с фокусом, навигацией с клавиатуры и взаимодействием с элементами интерфейса, что особенно важно при разработке доступных веб-приложений.

Инициализация и базовое использование

Для начала работы с библиотекой достаточно подключить скрипт через npm или CDN:

import ally from 'ally.js';
// или через CDN
// <script src="https://cdn.jsdelivr.net/npm/ally.js/dist/ally.min.js"></script>

После подключения можно использовать основные функции для проверки доступности элементов:

// Проверка, доступен ли элемент для фокусировки
const button = document.querySelector('button');
const isFocusable = ally.is.focusable({ context: button });
console.log(isFocusable); // true или false

Ключевой момент: ally.is предоставляет методы для проверки свойств элементов, а ally.query — для выборки элементов по критериям доступности.

Автоматические проверки фокуса

Фокусировка — один из критических аспектов доступности. Библиотека предоставляет инструменты для автоматического выявления элементов, которые не могут быть сфокусированы клавиатурой.

const nonFocusableElements = ally.query.nonFocusable({ context: document.body });
nonFocusableElements.forEach(el => {
  console.warn('Элемент недоступен для фокуса:', el);
});

Особенности работы:

Проверяется видимость элемента (display, visibility, opacity).
Проверяется состояние disabled для интерактивных элементов.
Исключаются элементы с tabindex="-1", если они не должны быть фокусируемыми.

Анализ ARIA-атрибутов

Библиотека позволяет выявлять элементы с некорректными или отсутствующими ARIA-атрибутами, что напрямую связано с WCAG 2.1:

const elementsWithInvalidAria = ally.query.matches('[aria-hidden="false"]', { context: document.body })
  .filter(el => !ally.is.focusable({ context: el }));

elementsWithInvalidAria.forEach(el => {
  console.warn('Элемент с некорректным ARIA:', el);
});

Ключевой момент: aria-hidden и другие ARIA-атрибуты должны использоваться корректно, чтобы вспомогательные технологии могли правильно интерпретировать интерфейс.

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

Алгоритмы ally.js учитывают визуальную и логическую доступность элементов:

visible: элемент отображается на странице и не скрыт стилями display: none или visibility: hidden.
inDocument: элемент присутствует в DOM.
focusable: элемент может быть сфокусирован клавиатурой.

Пример комплексной проверки:

const invisibleFocusableElements = ally.query.focusable({ context: document.body })
  .filter(el => !ally.is.visible({ context: el }));

invisibleFocusableElements.forEach(el => {
  console.error('Фокусируемый, но невидимый элемент:', el);
});

Навигация с клавиатуры

Для WCAG критично, чтобы все интерактивные элементы были доступны через клавиатуру. ally.js позволяет создавать отчеты по навигации:

const tabbableElements = ally.query.tabbable({ context: document.body });
tabbableElements.forEach(el => {
  console.log('Табулируемый элемент:', el);
});

Особенности:

tabbable учитывает tabindex и видимость.
Можно определить элементы, которые должны быть исключены из табуляции.

Интеграция с тестами

Ally.js может использоваться для автоматизированного тестирования с Jest, Cypress или другими фреймворками:

import ally from 'ally.js';

test('Все кнопки доступны для фокуса', () => {
  const buttons = document.querySelectorAll('button');
  buttons.forEach(btn => {
    expect(ally.is.focusable({ context: btn })).toBe(true);
  });
});

Такой подход позволяет включить проверки доступности в процесс CI/CD, что обеспечивает соответствие стандартам WCAG на постоянной основе.

Отчеты и диагностика

Библиотека предоставляет информацию о проблемных элементах, позволяя строить отчеты для команды разработчиков:

Список элементов, которые не могут быть сфокусированы.
Элементы с неправильными ARIA-атрибутами.
Невидимые, но фокусируемые элементы.
Некорректные последовательности табуляции.

Расширение возможностей

Ally.js поддерживает расширение функционала через собственные утилиты:

Создание кастомных фильтров элементов.
Интеграция с динамическим контентом и SPA.
Настройка контекста для проверки только определенных частей интерфейса.