WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Tool tips in Buttons

for

From: Bryan Garaventa
Date: Jul 31, 2024 8:29PM

Hi,
As with most things, that depends. Are you referring to a standard tooltip
like a title attribute, or a custom tooltip that is dynamically displayed
from the DOM?

If you use the title attribute it will set a description on the button and
this will be announced to non-sighted screen reader users, however sighted
keyboard users won't see anything when setting focus to the button.

If you use a custom tooltip via ARIA, then a focus handler must be set in
addition to mouse hover to ensure both keyboard and mouse accessibility, and
dismiss the tooltip intuitively in the same manner for both.

If done properly advanced custom tooltips can be made accessible, whereas
the title attribute does what it does and there is little you can do about
it.

Examples of different tooltip types:
https://whatsock.com/Templates/Tooltips/Internal/index.htm
https://whatsock.com/Templates/Tooltips/Error%20(Inline)/index.htm

All the best,
Bryan