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

Tippy.js — библиотека для создания всплывающих подсказок (tooltips) и поповеров в JavaScript, построенная на Popper.js. Одним из ключевых аспектов при работе с Tippy.js является доступность (accessibility, a11y). Всплывающие подсказки должны корректно взаимодействовать с клавиатурой, экранными читалками и другими вспомогательными технологиями.

ARIA-атрибуты

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

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

Пример создания простой подсказки с доступностью:

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

Навигация с клавиатуры

Для пользователей, которые используют клавиатуру:

  • Подсказки должны появляться при фокусе на элементе (focus), а не только при наведении мыши.
  • Настройка события появления на focus и mouseenter гарантирует, что подсказка будет доступна клавиатурным пользователям.
tippy('#button', {
  content: 'Доступная подсказка',
  trigger: 'mouseenter focus', // мышь и клавиатура
});

Проверка видимости для экранных читалок

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

  • aria: 'describedby' — элемент получает aria-describedby, когда подсказка активна.
  • aria: 'labelledby' — альтернативный режим, при котором элемент будет использовать подсказку как метку.
  • aria: false — отключает добавление любых ARIA-атрибутов, если это необходимо для кастомного решения.

Тестирование с автоматическими инструментами

Для оценки доступности можно использовать:

  • axe-core — библиотека для автоматической проверки веб-страниц на нарушения WCAG.
  • Lighthouse — встроенный инструмент в Chrome DevTools для аудита доступности.
  • Pa11y — инструмент для непрерывного мониторинга доступности сайта.

Пример интеграции Tippy.js с axe-core:

import axe from 'axe-core';

axe.run(document, {}, (err, results) => {
  if (err) throw err;
  console.log(results.violations); // выводит нарушения доступности
});

Тестирование на мобильных устройствах и сенсорных экранах

Tippy.js автоматически поддерживает сенсорные экраны, но важно убедиться, что:

  • Подсказки не перекрывают интерактивные элементы.
  • Подсказки исчезают при тапе вне элемента.
  • Доступность сохраняется при увеличении масштаба и изменении ориентации экрана.

Управление фокусом внутри сложных подсказок

Если подсказка содержит интерактивные элементы (кнопки, ссылки, поля ввода), необходимо:

  • Использовать interactive: true для того, чтобы подсказка не исчезала при фокусе на её содержимом.
  • Убедиться, что tabindex корректно установлен для всех элементов подсказки.
  • Проверить порядок фокусировки с помощью Tab и Shift+Tab.
tippy('#button', {
  content: '<button>Нажми меня</button>',
  allowHTML: true,
  interactive: true,
});

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

Использование слишком короткой задержки появления/скрытия может вызвать проблемы для пользователей с моторными нарушениями:

tippy('#button', {
  content: 'Подсказка с задержкой',
  delay: [300, 100], // [появление, скрытие] в миллисекундах
});

Ведение логов и тестовых сценариев

Для системного тестирования подсказок рекомендуется:

  • Писать юнит-тесты с использованием Jest или Testing Library для проверки появления и скрытия подсказок.
  • Использовать скринридеры (NVDA, VoiceOver) для ручного тестирования ARIA-атрибутов и поведения на клавиатуре.
  • Проверять подсказки в различных браузерах и устройствах, чтобы убедиться в корректной работе Popper.js и Tippy.js.

Итоговые рекомендации по доступности в Tippy.js

  • Всегда использовать trigger: 'mouseenter focus' для поддержки клавиатурных пользователей.
  • Активно проверять ARIA-атрибуты и их корректность.
  • При интерактивных подсказках обязательно включать interactive: true.
  • Настраивать задержки появления и исчезновения подсказок с учётом комфортного взаимодействия.
  • Регулярно тестировать с помощью инструментов автоматического аудита и экранных читалок.

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

Оглавление