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

Tooltipster изначально разработан как библиотека для создания настраиваемых всплывающих подсказок в веб-интерфейсах. Однако доступность интерфейса и корректная работа со скринридерами требуют особого внимания при интеграции. Tooltipster предоставляет ряд механизмов для улучшения восприятия подсказок пользователями с нарушениями зрения.

Атрибуты ARIA и их значение

Для совместимости с технологиями чтения с экрана важно использовать правильные ARIA-атрибуты. Основные из них:

  • aria-describedby – связывает элемент с подсказкой. Tooltipster автоматически добавляет этот атрибут к триггеру, указывая на ID контейнера тултипа. Это позволяет скринридеру озвучивать содержимое всплывающей подсказки, когда элемент получает фокус.
  • role="tooltip" – устанавливается на сам контейнер тултипа. Скринридеры используют этот атрибут, чтобы корректно интерпретировать содержимое как подсказку, а не как статический текст страницы.
  • aria-hidden – Tooltipster динамически управляет этим атрибутом, скрывая подсказку от скринридеров, когда она не видна. Это предотвращает озвучивание скрытых элементов.

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

В данном примере кнопка автоматически получает aria-describedby, а контейнер тултипа — role="tooltip".

Управление фокусом и озвучиванием

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

  1. Автоматическая привязка к фокусу При установке trigger: 'focus' подсказка появляется при получении элементом фокуса. Это гарантирует, что скринридер озвучит содержимое автоматически.
$('#infoButton').tooltipster({
  trigger: 'focus'
});
  1. Доступ к контенту через клавиатуру Tooltipster позволяет использовать interactive: true, чтобы пользователь мог взаимодействовать с тултипом (например, ссылками или кнопками) с помощью клавиатуры.
$('#infoButton').tooltipster({
  interactive: true
});

Эти настройки критически важны для пользователей, полагающихся на скринридеры.

Настройка задержки и анимации

Слишком короткая задержка появления подсказки может привести к тому, что скринридер не успеет озвучить содержимое. Tooltipster предоставляет параметры:

  • delay – задержка перед отображением подсказки. Для доступности рекомендуется установить значение не меньше 200–300 мс.
  • animationDuration – длительность анимации появления. Если анимация слишком длинная, скринридер может интерпретировать появление как опоздание.
$('#infoButton').tooltipster({
  delay: 250,
  animationDuration: 200
});

Эти настройки обеспечивают баланс между визуальной эстетикой и корректной озвучкой.

Динамическое обновление контента

Tooltipster поддерживает динамическое изменение текста подсказки через метод content. Для скринридеров важно, чтобы после обновления контента триггер оставался связан с новым тултипом:

$('#infoButton').tooltipster('content', 'Обновленная информация');

После обновления содержимого Tooltipster автоматически поддерживает aria-describedby, обеспечивая озвучивание обновленной информации.

Рекомендации по доступности

  • Всегда указывать role="tooltip" для контейнера.
  • Использовать trigger: 'focus' для интерактивных элементов.
  • Проверять работу скринридеров на популярных платформах (NVDA, JAWS, VoiceOver).
  • Избегать слишком быстрых анимаций и мгновенного скрытия тултипов.
  • Для интерактивного контента включать interactive: true.

Tooltipster предоставляет гибкий набор инструментов для соблюдения стандартов доступности, но корректная интеграция требует внимательного управления атрибутами ARIA и поведением фокуса.

Оглавление