Джейк Арчибальд делится историей, как он пытался сделать доступное решение, но в итоге получилось не очень.
Итак, задача. Нужно сделать кнопку-иконку, по наведению на которую показывается короткая подсказка, что это за кнопка. Как во всяких WYSIWYG-редакторах.
Джейк решил использовать современные поповеры,
hint для этого как раз неплохо подходит.
<button aria-describedby="bold-tooltip">
<svg>(bold icon)</svg>
</button>
<div id="bold-tooltip" popover="hint">Bold (⌘B)</div>
И ещё немного JavaScript, чтобы связать кнопки с тултипами.
К сожалению, этот код не доступный. Хотя там есть aria-атрибут, который вроде как должен помогать связать элементы для скринридера. Почему? Читайте в статье. Там есть готовое решение и доступный код, который можно утащить к себе в проекты.
https://jakearchibald.com/2026/my-tooltip-a11y-mistake/
