Понятие accessibility и WCAG

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

Управление фокусом

Фокус является ключевым элементом доступности, особенно для пользователей, взаимодействующих с приложением с помощью клавиатуры. ally.js предоставляет несколько способов контроля фокуса:

Навигация по фокусу

Методы tabNext и tabPrevious позволяют программно управлять порядком перехода между фокусируемыми элементами:

ally.tabNext({
  context: document,
  strategy: 'closest',
  includeOnlyTabbable: true
});
  • context — корневой элемент, в пределах которого происходит поиск.
  • strategy — способ определения ближайшего элемента для фокуса (closest, strict).
  • includeOnlyTabbable — если true, учитываются только элементы, доступные через клавишу Tab.

Фокус на конкретный элемент

Метод focus позволяет установить фокус на конкретный элемент, учитывая правила доступности:

const button = document.querySelector('#submit');
ally.focus(button);

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

  • Автоматическая проверка, видим ли элемент.
  • Обход элементов с display: none и visibility: hidden.
  • Учет атрибута tabindex.

Обход и идентификация элементов

Ally.js предоставляет функции для получения списка доступных элементов интерфейса:

Получение tabbable элементов

const tabbableElements = ally.query.tabbable({
  context: document
});
  • Возвращает массив элементов, на которые можно переместить фокус через клавишу Tab.
  • Учитывает атрибуты tabindex, скрытые элементы и disabled.

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

Метод is.focusable(element) проверяет, может ли элемент получить фокус:

const input = document.querySelector('#name');
if (ally.is.focusable(input)) {
  input.focus();
}
  • Учитывает CSS-свойства и атрибуты HTML.
  • Включает проверку видимости и интерактивности элемента.

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

Ally.js упрощает работу с ARIA-атрибутами, необходимыми для соответствия WCAG:

  • aria-hidden — элементы с aria-hidden="true" исключаются из обхода фокуса.
  • aria-disabled — элементы с этим атрибутом не получают фокус.
  • role — позволяет определить интерактивные компоненты и корректно управлять фокусом.

Пример обхода контейнера с учетом ARIA:

const visibleElements = ally.query.tabbable({
  context: document.querySelector('#modal')
}).filter(el => !el.hasAttribute('aria-hidden'));

Контроль фокусного цикла

Для модальных окон, всплывающих подсказок и диалогов важно ограничивать фокус в пределах контейнера. Ally.js предоставляет метод trap для управления этим:

const modal = document.querySelector('#modal');
const trap = ally.trap(modal);

trap.activate(); // активирует фокусный цикл
trap.deactivate(); // снимает ограничение

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

  • Фокус циклически перемещается внутри контейнера.
  • Поддержка динамически добавляемых элементов.
  • Совместимость с клавишами Tab и Shift+Tab.

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

Ally.js включает утилиты для динамической проверки состояния интерфейса:

  • visibility — проверяет видимость элемента на экране.
  • focusability — оценивает, доступен ли элемент для фокусировки.
  • tabbable — проверяет, входит ли элемент в порядок табуляции.

Пример проверки перед фокусировкой:

const element = document.querySelector('#submit');
if (ally.is.tabbable(element)) {
  element.focus();
}

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

Библиотека способствует выполнению требований WCAG:

  • 1.3.1 — Идентификация компонентов: управление ARIA и ролями элементов.
  • 2.1.1 — Клавиатурная навигация: методы tabNext, tabPrevious, focus.
  • 2.4.3 — Видимость фокуса: ally.js гарантирует корректное перемещение фокуса по видимым элементам.
  • 4.1.2 — Имя, роль, значение: использование ARIA-атрибутов совместно с проверкой фокусируемости.

Продвинутые сценарии

Динамически создаваемые элементы

Ally.js корректно работает с элементами, добавленными в DOM после инициализации:

const newButton = document.createElement('button');
newButton.textContent = 'Click';
document.body.appendChild(newButton);

if (ally.is.focusable(newButton)) {
  newButton.focus();
}

Обход сложных интерфейсов

Для компонентов с вкладками, аккордеонами и меню можно использовать комбинацию методов query.tabindex() и фильтров по ARIA:

const interactiveItems = ally.query.focusable({
  context: document.querySelector('#accordion')
}).filter(item => item.getAttribute('role') === 'button');
  • Гарантирует, что только интерактивные элементы получают фокус.
  • Поддерживает асинхронное добавление и удаление элементов.

Ally.js обеспечивает комплексное управление доступностью, сочетая возможности работы с фокусом, ARIA-атрибутами и динамическим интерфейсом. Это позволяет создавать веб-приложения, полностью соответствующие требованиям WCAG и обеспечивающие комфортную навигацию для пользователей с разными типами ограничений.

Оглавление