ally.element.visible

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

Основная функциональность

ally.element.visible позволяет определить, доступен ли элемент для восприятия:

  • Визуальная видимость — элемент не скрыт через CSS (display: none, visibility: hidden, opacity: 0), и он находится в пределах видимой области окна браузера.
  • Доступность для скринридеров — учитывается состояние aria-hidden, а также другие атрибуты, которые делают элемент недоступным.
  • Наличие размеров — элемент с нулевой шириной и высотой считается невидимым.

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

import { elementVisible } from 'ally.js';

const button = document.querySelector('#submitButton');

const isVisible = elementVisible(button);

console.log(isVisible); // true или false

Объект конфигурации

Функция принимает не только сам элемент, но и объект настроек, позволяющий более точно контролировать проверку видимости:

const isVisible = elementVisible(button, {
  strategy: 'strict',       // 'strict' или 'default'
  checkOpacity: true,       // учитывать прозрачность
  checkVisibility: true,    // учитывать visibility CSS
  checkOverflow: true       // учитывать скрытие через overflow
});
  • strategy — выбирает метод проверки. strict проверяет элемент комплексно, включая видимость всех родительских элементов. default — проверяет только сам элемент.
  • checkOpacity — учитывает opacity: 0.
  • checkVisibility — проверяет visibility: hidden.
  • checkOverflow — определяет, не обрезан ли элемент через overflow: hidden родительских блоков.

Алгоритм работы

  1. Проверка существования элемента — если элемент отсутствует в DOM, возвращается false.
  2. Анализ CSS-свойств — display, visibility, opacity.
  3. Проверка размеров — ширина и высота должны быть больше нуля.
  4. Проверка позиции в viewport — элемент должен быть видим в окне браузера.
  5. Проверка родительских контейнеров — если какой-либо контейнер скрыт или aria-hidden, элемент считается невидимым.

Работа с динамическим контентом

ally.element.visible полезен при работе с элементами, которые появляются или скрываются динамически:

const modal = document.querySelector('#modalDialog');

if (elementVisible(modal)) {
  console.log('Модальное окно видно');
} else {
  console.log('Модальное окно скрыто');
}

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

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

Можно использовать вместе с MutationObserver для отслеживания появления элементов в DOM и изменения их видимости:

const observer = new MutationObserver(() => {
  if (elementVisible(button)) {
    console.log('Кнопка стала видимой');
  }
});

observer.observe(document.body, { childList: true, subtree: true });

Совместимость с доступностью

Эта функция учитывает, что видимость не всегда равнозначна доступности:

  • Элемент может быть визуально скрыт (opacity: 0) или за пределами экрана, но быть доступным через клавиатуру или скринридер.
  • aria-hidden="true" делает элемент невидимым для технологий доступности, даже если он видим на экране.

Таким образом, ally.element.visible помогает создать более надёжные условия для взаимодействия с элементами интерфейса, особенно при построении доступных веб-компонентов.

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

  • Использовать strategy: 'strict' для элементов, к которым требуется полный контроль видимости.
  • Проверять видимость перед фокусировкой на элемент, чтобы избежать ошибок для пользователей с клавиатурой.
  • Комбинировать с ally.query.tabbable() и другими методами библиотеки для построения корректного доступного интерфейса.

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

Оглавление