Параметры доступности

Tippy.js предоставляет гибкую систему управления всплывающими подсказками (tooltips), включая средства для обеспечения доступности (accessibility). Доступность является критически важной при работе с динамическим контентом, поскольку она позволяет пользователям с ограниченными возможностями получать информацию о интерфейсе через вспомогательные технологии, такие как скринридеры.

Роль и атрибуты ARIA

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

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

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

tippy('#button', {
  content: 'Подсказка с доступностью',
  aria: 'describedby'
});

В этом примере aria-describedby автоматически связывает кнопку с созданной подсказкой, обеспечивая правильное поведение для пользователей скринридеров.

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

Tippy.js позволяет контролировать фокус для улучшения доступности. Важные параметры:

  • trigger – определяет события активации подсказки (mouseenter, focus, click). Для пользователей клавиатуры критично включать focus.
  • interactive – делает подсказку интерактивной, позволяя пользователю перемещать фокус внутрь подсказки, не закрывая её. Особенно важно для элементов с формами или ссылками.

Пример интерактивной подсказки:

tippy('#input', {
  content: '<button>Нажми меня</button>',
  allowHTML: true,
  interactive: true,
  trigger: 'focus'
});

Пользовательские атрибуты для ассистивных технологий

Tippy.js поддерживает добавление дополнительных ARIA-атрибутов через параметр popperOptions или атрибуты HTML. Например:

tippy('#icon', {
  content: 'Иконка помощи',
  onCreate(instance) {
    instance.popper.setAttribute('aria-label', 'Информация о иконке');
  }
});

Это позволяет расширить стандартную доступность, предоставляя скринридерам более подробные описания.

Опция a11y

Tippy.js включает встроенную опцию a11y, которая отвечает за поведение подсказки с точки зрения доступности:

  • true (по умолчанию) – автоматически добавляет aria-атрибуты и управляет видимостью подсказки.
  • false – отключает автоматическое управление ARIA, оставляя контроль разработчику.

Пример отключения автоматической ARIA-обработки:

tippy('#link', {
  content: 'Ссылка с подсказкой',
  a11y: false
});

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

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

  1. Скрытие подсказки при неактивности – атрибут aria-hidden="true" предотвращает озвучивание скрытых подсказок.
  2. Автоматическое управление aria-describedby – обеспечивает однозначную связь между триггером и подсказкой.
  3. Поддержка клавиатурной навигации – активация через focus позволяет пользователям без мыши получать информацию о элементе.

Настройка задержки для доступности

Для пользователей скринридеров часто важно, чтобы подсказка не исчезала слишком быстро. Параметры delay.show и delay.hide позволяют настроить задержку отображения и скрытия:

tippy('#button', {
  content: 'Подсказка с задержкой',
  delay: [500, 300] // 500ms show, 300ms hide
});

Дополнительные рекомендации

  • Использовать интерактивные подсказки для элементов с формами или ссылками внутри.
  • Обеспечивать активацию подсказки через focus, чтобы клавиатурные пользователи могли её увидеть.
  • Проверять поведение подсказок со скринридерами, чтобы убедиться в корректной озвучке.

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

Оглавление