Соответствие WCAG

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

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

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

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

Пример создания тултипа с корректной ARIA-разметкой:

tippy('#button', {
  content: 'Сохранить изменения',
  aria: 'describedby', // автоматически добавляет aria-describedby
  role: 'tooltip',
});

В этом примере #button получает атрибут aria-describedby, указывающий на ID элемента тултипа. При навигации с помощью скринридера пользователь узнает о наличии дополнительной информации.

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

WCAG требует, чтобы интерактивные элементы были доступными с клавиатуры. Tippy.js обеспечивает это через триггеры событий:

  • mouseenter и mouseleave – для мыши.
  • focus и blur – для клавиатуры и скринридеров.

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

tippy('#input', {
  content: 'Введите ваше имя',
  trigger: 'mouseenter focus',
});

Использование focus гарантирует, что подсказка появляется, когда элемент получает клавиатурный фокус, что важно для пользователей, которые не используют мышь.

Тайминги и видимость

Согласно WCAG, пользователю должно быть достаточно времени для прочтения содержимого подсказки. В Tippy.js можно управлять задержкой показа и скрытия через параметры:

tippy('#icon', {
  content: 'Подсказка с задержкой',
  delay: [300, 500], // 300 мс перед появлением, 500 мс перед скрытием
});
  • Первая задержка предотвращает мгновенное появление при случайном наведении.
  • Вторая задержка позволяет пользователю прочитать содержимое тултипа до исчезновения.

Доступные темы и стили

Визуальная доступность влияет на контрастность текста и фона. Tippy.js поддерживает кастомные темы, которые можно настроить с учетом стандартов WCAG для контраста не менее 4.5:1 для текста обычного размера:

tippy('#link', {
  content: 'Дополнительная информация',
  theme: 'accessible',
});

tippy.setDefaultProps({
  theme: 'accessible',
});

Стили темы accessible могут включать яркий контраст текста и фона, крупный шрифт, достаточные отступы, чтобы улучшить читаемость.

Интерактивные тултипы и доступность

Tippy.js позволяет создавать интерактивные подсказки, которые содержат кнопки, ссылки или формы. Для соответствия WCAG важно:

  • Устанавливать interactive: true для предотвращения закрытия тултипа при наведении курсора на его содержимое.
  • Управлять фокусом внутри тултипа, чтобы пользователи клавиатуры могли перемещаться между элементами.

Пример интерактивного тултипа:

tippy('#menu', {
  content: '<button id="action">Действие</button>',
  allowHTML: true,
  interactive: true,
});

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

Скрытие содержимого от скринридеров

Если требуется показать визуальный тултип без озвучивания, можно использовать:

tippy('#icon', {
  content: 'Всплывающая подсказка только для визуального восприятия',
  aria: 'off',
});

Опция aria: 'off' отключает автоматическое добавление ARIA-атрибутов, что соответствует практике скрытия информации, не предназначенной для вспомогательных технологий.

Использование анимаций с осторожностью

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

tippy('#avatar', {
  content: 'Профиль пользователя',
  animation: 'shift-away', // мягкая анимация
  duration: [200, 200],
});
  • Длительные или слишком быстрые эффекты могут затруднить восприятие.
  • Рекомендуется применять короткие и плавные анимации, чтобы не нарушать когнитивное восприятие.

Итоговые рекомендации по WCAG

  • Всегда использовать aria-describedby и role="tooltip" для вспомогательных технологий.
  • Обеспечивать доступность через клавиатуру с focus и blur.
  • Настраивать задержку и время видимости, чтобы пользователь успевал прочитать информацию.
  • Поддерживать высокий контраст и читаемость текста через кастомные темы.
  • Для интерактивных тултипов включать interactive: true и корректно управлять фокусом.
  • Отключать ARIA для визуальных подсказок, если они не предназначены для скринридеров.
  • Использовать плавные и короткие анимации, чтобы не нарушать восприятие.

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

Оглавление