Поддержка скринридеров

Tippy.js, как современная библиотека для создания всплывающих подсказок и тултипов, предоставляет встроенные механизмы для обеспечения доступности контента. Поддержка скринридеров реализуется через правильное использование ARIA-атрибутов, управление фокусом и обработку событий клавиатуры.

Использование ARIA-атрибутов

Tippy.js автоматически добавляет ключевые ARIA-атрибуты к элементам:

  • aria-describedby — связывает элемент с тултипом. Атрибут содержит id тултипа и позволяет скринридеру озвучивать подсказку при фокусе на элементе.
  • role="tooltip" — применяется к самому тултипу, что однозначно указывает скринридеру его назначение.
  • aria-hidden="true/false" — контролирует видимость тултипа для скринридеров. Когда тултип скрыт, aria-hidden="true" предотвращает его озвучивание.

Пример настройки:

tippy('#button', {
  content: 'Это подсказка',
  aria: {
    content: 'auto', // автоматически добавляет aria-describedby и role
  },
});

В данном примере Tippy.js автоматически сгенерирует уникальный id для тултипа и установит его в aria-describedby целевого элемента. Опция aria.content со значением auto обеспечивает корректную поддержку большинства скринридеров.

Управление фокусом и видимостью

Скринридеры взаимодействуют с элементами, которые находятся в фокусе. Tippy.js предоставляет несколько стратегий управления видимостью тултипов:

  • trigger: 'mouseenter focus' — тултип появляется при наведении мыши и при фокусе с клавиатуры, что обеспечивает доступность для пользователей с ограниченной моторикой.
  • interactive: true — позволяет пользователю перемещать фокус внутри тултипа (например, для ссылки или кнопки внутри подсказки) без его закрытия.
  • hideOnClick — можно отключить, чтобы тултип не закрывался случайно при попытке взаимодействия с его контентом.

Пример:

tippy('#info', {
  content: 'Дополнительная информация',
  trigger: 'mouseenter focus',
  interactive: true,
  hideOnClick: false,
});

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

Адаптация динамического контента

Если контент тултипа обновляется динамически (например, при загрузке данных с сервера), важно, чтобы ARIA-атрибуты оставались актуальными:

  • Tippy.js автоматически обновляет aria-describedby, если использовать методы setContent или setProps.
  • При динамическом изменении текста стоит вызывать метод instance.popperInstance.update(), чтобы тултип оставался корректно привязанным к целевому элементу и скринридеры могли его озвучивать.

Пример динамического обновления:

const tip = tippy('#dynamic', {
  content: 'Изначальный текст',
  aria: { content: 'auto' },
});

document.querySelector('#updateBtn').addEventListener('click', () => {
  tip.setContent('Обновленный текст подсказки');
});

Обработка клавиатуры

Tippy.js поддерживает стандартные события клавиатуры:

  • Tab — перемещение фокуса к элементам внутри тултипа (если interactive: true).
  • Esc — закрытие тултипа при нажатии клавиши Escape.
  • Arrow keys — в связке с followCursor или кастомными навигационными подсказками можно реализовать перемещение между тултипами.

Пример:

tippy('#keyboard', {
  content: 'Используйте Esc для закрытия',
  trigger: 'focus',
  interactive: true,
  hideOnClick: false,
});

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

Для проверки корректной работы скринридеров рекомендуется:

  1. Использовать встроенные инструменты браузеров, такие как Accessibility Inspector в Chrome и Firefox.
  2. Проверять озвучивание контента через скринридеры, например NVDA или VoiceOver.
  3. Следить, чтобы aria-describedby всегда соответствовал текущему содержимому тултипа.

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

Ключевые рекомендации

  • Всегда включать aria: { content: 'auto' } для стандартной доступности.
  • Использовать trigger: 'focus' наряду с mouseenter для клавиатурных пользователей.
  • Активировать interactive: true при наличии интерактивного контента в тултипе.
  • Обновлять контент через методы Tippy.js, чтобы скринридеры получали актуальную информацию.
  • Проверять работу с различными скринридерами и инструментами доступности.

Эти механизмы делают Tippy.js полностью совместимым с современными требованиями к доступности веб-приложений.

Оглавление