Тултипы и доступность

, Александр Мышов

Сара Хигли поделилась своими мыслями по поводу доступных тултипов в статье — "Tooltips in the time of WCAG 2.1".

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

Для тултипов с контролами внутри Сара рекомендует использовать паттерн disclosure button, а для информационных тултипов даёт целый список советов:

  • Тултипы должны появляться только на интерактивных элементах
  • Тултип должен явно описывать контрол, на котором он был вызван
  • Используйте aria-describedby и aria-labelledby для ассоциирования UI-контрола с тултипом
  • Не используйте атрибут title для тултипов
  • Не помещайте важную информацию в тултипы
  • Предоставьте возможность закрыть тултип как с помощью клавиатуры, так и с помощью указателя
  • Не закрывайте тултип, если пользователь водит по нему указателем мыши
  • Не используйте таймаут для закрытия тултипов

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

https://sarahmhigley.com/writing/tooltips-in-wcag-21/

← На главную