E-mail List Archives
Thread: Tool tips in Buttons
Number of posts in this thread: 3 (In chronological order)
From: Christine L Holmes
Date: Wed, Jul 31 2024 2:06PM
Subject: Tool tips in Buttons
No previous message | Next message →
Hello,
I have been asked if a team can put a tool tip on a button. The tool tip would be activated on hover.
I can think of many different reasons not to do this but I am looking specifically for any issues regarding accessibility. Does a tool tip on a button break accessibility?
Thanks
Christine
Accessibility is everyone's business.
___________________________________________________________________________________
[cid:3950778928*image001.png@01DAE34A.70FE9AF0]<https://www.northerntrust.com/>
Christine Holmes, CPACC, CSM, SA
Vice President | Digital Accessibility Program Manager| Experience Design and Research
50 South La Salle Street, M-7, Chicago, Illinois 60603 USA
+1 312-557-8834 | = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
From: Bryan Garaventa
Date: Wed, Jul 31 2024 8:29PM
Subject: Re: Tool tips in Buttons
← Previous message | Next message →
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
From: Joshua Hori
Date: Fri, Sep 06 2024 1:53PM
Subject: Re: Tool tips in Buttons
← Previous message | No next message
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 ADDRESS REMOVED = > on behalf of Bryan Garaventa < = EMAIL ADDRESS REMOVED = >
Date: Wednesday, July 31, 2024 at 7:29 PM
To: 'WebAIM Discussion List' < = EMAIL ADDRESS 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