WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Tool tips in Buttons

for

From: Joshua Hori
Date: Sep 6, 2024 1:53PM

This has been sitting in my head rent free for the last month…

I found the codepen that we created to demonstrate the ability to resize tooltips and acronyms using javascript. You can view that here: https://codepen.io/egwen/pen/gOQYqKr

This code makes the tooltip and acronym accessible to keyboard users too.

Enjoy,

Joshua Hori
Accessible Technology Coordinator
Information Educational Technology
Academic Technology Services
50 Hutchison Dr.
Davis, CA 95616
530-752-2439
Schedule a meeting via Calendly<https://calendly.com/d/ytt-hsj-vbn>


From: WebAIM-Forum < <EMAIL REMOVED> > on behalf of Bryan Garaventa < <EMAIL REMOVED> >
Date: Wednesday, July 31, 2024 at 7:29 PM
To: 'WebAIM Discussion List' < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Tool tips in Buttons
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