ally.is.onlyTabbable и ally.is.visible

Библиотека ally.js предоставляет набор утилит для анализа и управления доступностью элементов на веб-странице. Две ключевые функции для работы с видимостью и управлением фокусом — ally.is.onlyTabbable и ally.is.visible. Они позволяют точно определять, какие элементы могут быть доступны пользователю через клавиатуру и какие реально видимы на странице.

ally.is.onlyTabbable

Функция ally.is.onlyTabbable используется для проверки, является ли элемент доступным для фокусировки только через клавишу Tab, без возможности фокусировки через другие методы (например, программно через .focus()).

Синтаксис:

ally.is.onlyTabbable(element)

Параметры:

  • element — DOM-элемент, который требуется проверить.

Возвращаемое значение:

  • true — если элемент доступен только через Tab.
  • false — если элемент доступен также другими способами или не доступен вовсе.

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

const button = document.querySelector('button');
if (ally.is.onlyTabbable(button)) {
  console.log('Кнопка доступна только через Tab');
}

Особенности поведения:

  1. Проверка учитывает атрибуты tabindex:

    • tabindex="-1" делает элемент недоступным через Tab.
    • tabindex="0" позволяет элементу участвовать в обычной последовательности Tab.
    • tabindex>0 помещает элемент на заданную позицию в последовательности Tab.

  2. disabled элементы и элементы с aria-hidden="true" не считаются tabbable.

  3. Важно учитывать CSS-свойства, влияющие на доступность:

    • display: none
    • visibility: hidden
    • opacity: 0 не блокирует Tab, но может быть использовано вместе с другими проверками видимости.

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

ally.is.visible

Функция ally.is.visible определяет, видим ли элемент на странице для пользователя, а не просто существует ли он в DOM.

Синтаксис:

ally.is.visible(element)

Параметры:

  • element — DOM-элемент для проверки.

Возвращаемое значение:

  • true — элемент видим.
  • false — элемент скрыт.

Критерии видимости:

  1. CSS-свойства:

    • display: none — элемент не видим.
    • visibility: hidden — элемент не видим.
    • opacity: 0 — элемент визуально невидим, но может оставаться интерактивным (фокусируемым). ally.js учитывает интерактивность и видимость в реальном восприятии.

  2. Размеры и положение:

    • Элемент с offsetWidth и offsetHeight равными нулю обычно считается невидимым.
    • Элемент, полностью скрытый за другими элементами (z-index, перекрытие), может считаться видимым с точки зрения DOM, но для accessibility API будет недоступен.

  3. Родительские элементы:

    • Если хотя бы один из родительских контейнеров скрыт через display: none или visibility: hidden, дочерний элемент также считается невидимым.

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

const menu = document.querySelector('.dropdown-menu');
if (ally.is.visible(menu)) {
  console.log('Меню отображается на странице');
} else {
  console.log('Меню скрыто');
}

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

Часто требуется проверить и доступность через Tab, и видимость элемента одновременно. Это позволяет реализовать корректную логику фокусировки и обхода элементов клавиатурой:

const links = document.querySelectorAll('a');
links.forEach(link => {
  if (ally.is.onlyTabbable(link) && ally.is.visible(link)) {
    console.log('Ссылка доступна для клавиатурного фокуса и видима пользователю');
  }
});

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

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

  • Проверки с ally.is.visible и ally.is.onlyTabbable лучше выполнять динамически, особенно для элементов, которые появляются и исчезают через JavaScript.
  • В интерфейсах с модальными окнами и дропдаунами эти функции помогают управлять фокусом и предотвращать “потерю клавиатурного доступа”.
  • Для автоматизированного тестирования доступности эти методы полезны при написании скриптов проверки compliance с WCAG.

Выводы по функционалу

  • ally.is.onlyTabbable — определяет элементы, доступные исключительно через клавиатурную навигацию.
  • ally.is.visible — проверяет реальную видимость элемента на странице, учитывая CSS, размеры и контекст родителя.
  • Совместное использование обеспечивает корректную и безопасную навигацию для пользователей с ограниченными возможностями, а также помогает автоматизировать проверку доступности интерфейсов.
Оглавление