ally.is.focusable и ally.is.tabbable

Библиотека ally.js предоставляет удобные инструменты для работы с доступностью элементов на веб-странице. Метод ally.is.focusable позволяет определить, может ли конкретный элемент получить фокус. Фокусировка является ключевым аспектом доступности, так как позволяет пользователю взаимодействовать с элементами через клавиатуру и вспомогательные технологии.

Сигнатура и основные параметры

ally.is.focusable(element, [options])

  • element – DOM-узел, который проверяется на возможность фокусировки.

  • options (необязательный объект):

    • strategy – задаёт способ проверки. Возможные значения:

      • "strict" – элемент считается фокусируемым только если он полностью видим и доступен для взаимодействия.
      • "default" – более мягкая проверка, учитывает базовую доступность, но игнорирует некоторые визуальные ограничения.

    • context – контейнер, внутри которого выполняется проверка видимости.

    • displayCheck – функция или строка, которая управляет проверкой CSS-свойств display и visibility. Например, "full" проверяет видимость полностью, "none" игнорирует.

Логика работы

Метод проверяет несколько условий:

  1. Видимость элемента Проверяются CSS-свойства display, visibility, opacity, а также наличие родительских элементов с display: none. Элемент считается невидимым, если хотя бы одно из этих условий нарушается.

  2. Атрибуты управления фокусом Проверяются стандартные атрибуты HTML:

    • tabindex – значение ≥ 0 позволяет элементу получать фокус.
    • элементы форм (input, select, textarea, button) без атрибута disabled.

  3. Специфические сценарии Элементы вроде <a> без href или элементы, полностью скрытые через ARIA-атрибуты (aria-hidden="true"), также считаются нефокусируемыми.

Пример использования

const button = document.querySelector('button#submit');
if (ally.is.focusable(button)) {
  console.log('Кнопка доступна для фокуса');
}

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

const allElements = document.querySelectorAll('*');
const focusableElements = Array.from(allElements).filter(ally.is.focusable);

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

ally.is.tabbable

Метод ally.is.tabbable является более строгой проверкой по сравнению с ally.is.focusable. Он определяет, может ли элемент быть достигнут с помощью клавиши Tab. Это особенно важно при создании интерфейсов с управлением через клавиатуру.

Сигнатура и параметры

ally.is.tabbable(element, [options])

  • element – DOM-узел, проверяемый на возможность табуляции.

  • options (необязательный объект):

    • context – область документа, в которой выполняется проверка.
    • ignoreVisibility – если true, проверка игнорирует видимость элемента.
    • strategy – "strict" или "default".

Отличие от focusable

Главное различие между focusable и tabbable заключается в том, что элемент может быть фокусируемым, но не табулябельным. Например:

  • <div tabindex="0"> – фокусируется при вызове element.focus(), но может быть исключён из последовательности табуляции в зависимости от порядка tabindex.
  • <input disabled> – не tabbable, даже если можно программно вызвать focus().

Логика работы

  1. Фокусируемость Первым проверяется возможность получения фокуса через ally.is.focusable.

  2. Tabindex Элемент считается tabbable, если:

    • Он имеет положительный или нулевой tabindex.
    • Он является стандартным интерактивным элементом (button, input, a[href]) и не отключён.

  3. Видимость и контекст Метод учитывает видимость элемента, наличие display: none у родителей и другие CSS-свойства, влияющие на взаимодействие. При использовании параметра ignoreVisibility эти проверки можно пропустить.

Пример использования

const links = document.querySelectorAll('a, button, input');
const tabbableElements = Array.from(links).filter(ally.is.tabbable);
console.log('Элементы, доступные для Tab:', tabbableElements);

Метод полезен для управления клавиатурой и создания пользовательских компонентов с правильной последовательностью фокуса.

Практическое применение

  • Создание модальных окон Использование ally.is.tabbable позволяет ограничить фокус внутри модального окна, предотвращая уход фокуса на задний план.

  • Динамическая фильтрация элементов С помощью ally.is.focusable можно выделять все элементы, доступные для взаимодействия, и применять к ним обработчики событий клавиатуры.

  • Тестирование доступности Проверка с focusable и tabbable помогает выявить элементы, которые должны быть доступны, но не включены в последовательность табуляции, или наоборот.

Советы по использованию

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

  • Использование с фильтрами Методы можно применять к NodeList или массивам элементов для массовой проверки доступности.

  • Настройка стратегии strategy: "strict" обеспечивает более корректную проверку для сложных компонентов с динамическими стилями.

  • Контроль видимости Параметр displayCheck позволяет точно учитывать CSS-свойства и родительские контейнеры, что важно при работе с анимациями и скрытыми элементами.

Методы ally.is.focusable и ally.is.tabbable формируют основу для создания полностью доступных интерфейсов на JavaScript, обеспечивая точное управление фокусом и последовательностью табуляции.

Оглавление