Web Content Accessibility Guidelines (WCAG) — это набор рекомендаций w3c по созданию доступного контента. WCAG покрывает много разных кейсов, но в нём нет явных рекомендаций, что делать с тултипами. Вся проблема в том, что у тултипов может быть разная семантика в зависимости от контекста. Более того, в тултипе могут отображаться интерактивные элементы, что вызывает ещё больше вопросов.
Для тултипов с контролами внутри Сара рекомендует использовать паттерн disclosure button, а для информационных тултипов даёт целый список советов:
- Тултипы должны появляться только на интерактивных элементах
- Тултип должен явно описывать контрол, на котором он был вызван
- Используйте
aria-describedby и aria-labelledby для ассоциирования UI-контрола с тултипом- Не используйте атрибут
title для тултипов- Не помещайте важную информацию в тултипы
- Предоставьте возможность закрыть тултип как с помощью клавиатуры, так и с помощью указателя
- Не закрывайте тултип, если пользователь водит по нему указателем мыши
- Не используйте таймаут для закрытия тултипов
Статья очень подробно разбирает проблему доступности тултипов. Рекомендую почитать всем, кто занимается разработкой интерфейсов.
#ui #a11y #wcag
https://sarahmhigley.com/writing/tooltips-in-wcag-21/