Атрибуты ARIA

Библиотека Tippy.js предоставляет удобный способ создания подсказок (tooltips) и всплывающих элементов, поддерживая стандарты доступности через ARIA (Accessible Rich Internet Applications). Правильное использование ARIA-атрибутов критично для обеспечения доступности интерфейса для пользователей с ограниченными возможностями, включая тех, кто использует экранные читалки.

Основные ARIA-атрибуты

Tippy.js автоматически управляет некоторыми ARIA-атрибутами, чтобы подсказки корректно интерпретировались вспомогательными технологиями. Основные из них:

  1. aria-describedby Этот атрибут добавляется к элементу, на который наведен курсор или который фокусируется. Он указывает на id всплывающего элемента, который содержит описание элемента.

    tippy('#button', {
  content: 'Нажмите для отправки формы'
});

    В DOM элемент #button получит атрибут aria-describedby="tippy-1", где tippy-1 — уникальный идентификатор тултипа.

  2. role=“tooltip” Всплывающий элемент Tippy.js автоматически получает роль tooltip, что позволяет экранным читалкам распознавать его как подсказку.

    <div role="tooltip" id="tippy-1">Нажмите для отправки формы</div>

  3. aria-hidden Для скрытых тултипов, которые не должны быть доступны для вспомогательных технологий до момента отображения, Tippy.js использует атрибут aria-hidden="true". При появлении подсказки значение меняется на false. Это предотвращает преждевременное озвучивание содержимого.

Настройка ARIA вручную

Хотя Tippy.js управляет большинством ARIA-атрибутов автоматически, иногда требуется их тонкая настройка.

  1. Изменение aria-describedby Можно задать собственный идентификатор для подсказки через опцию aria:

    tippy('#button', {
  content: 'Нажмите для отправки формы',
  aria: {
    content: 'custom-tooltip-id'
  }
});

    Это полезно, если подсказка должна ссылаться на уже существующий элемент или использовать нестандартный идентификатор.

  2. Отключение ARIA Если требуется полностью управлять ARIA вручную, можно отключить автоматическую обработку:

    tippy('#button', {
  content: 'Нажмите для отправки формы',
  aria: {
    enabled: false
  }
});

Взаимодействие с клавиатурой

Tippy.js поддерживает ARIA для фокусируемых элементов. Основные сценарии:

  • Подсказка появляется при focus на элементе и автоматически добавляется в aria-describedby.
  • Использование опции trigger: 'mouseenter focus' гарантирует, что подсказка доступна как через мышь, так и через клавиатуру.
  • ARIA-атрибуты корректно обновляются при динамическом изменении содержимого подсказки.
tippy('#input', {
  content: 'Введите ваш адрес электронной почты',
  trigger: 'mouseenter focus'
});

Динамическое содержимое и обновление ARIA

При изменении содержимого подсказки через метод setContent Tippy.js автоматически обновляет ARIA-атрибуты.

const instance = tippy('#button', {
  content: 'Первоначальное сообщение'
});

instance.setContent('Новое описание кнопки');

После вызова setContent aria-describedby продолжает ссылаться на тот же id, а экранные читалки получают обновленное содержание.

ARIA и анимации

Tippy.js поддерживает анимации появления и скрытия подсказок. Атрибут aria-hidden синхронизирован с состоянием анимации:

  • До появления: aria-hidden="true"
  • Во время отображения: aria-hidden="false"
  • После исчезновения: aria-hidden="true"

Такой подход предотвращает озвучивание подсказки, пока она визуально не доступна, сохраняя соответствие стандартам доступности.

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

  • Всегда указывать уникальные идентификаторы для подсказок, особенно если на странице много элементов с тултипами.
  • Использовать стандартные роли и состояния ARIA, чтобы экранные читалки корректно распознавали подсказки.
  • Обновлять содержимое через методы Tippy.js, чтобы ARIA-атрибуты оставались синхронизированными.
  • Тестировать доступность с помощью экранных читалок и инструментов вроде Lighthouse или axe.

Использование ARIA в Tippy.js обеспечивает совместимость с технологиями доступности, повышает удобство навигации для пользователей с ограниченными возможностями и делает интерфейс более профессиональным и стандартизированным.

Оглавление