RE: Accessible Tool Tips

Hi Adam,

In my response I described:
* the current behavior from a code persective
* how to implement a tooltip (bound to the existing element) that is exposed on hover and focus
* then discussed how to do something that is not a tooltip, but what we call a toggletip where it is not bound to a control with an existing function and opens on click and enter/space.
Apologies if the distinction between a tooltip and a toggletip in the last paragraph was not clear.

Best,
Juliette
On 10/23/2025 3:09:10 PM, Adam Cooper <cooperad@bigpond.com> wrote:
According to the ARIA tooltip example, a tooltip is not a focusable standalone button, but something bound to an existing control.
 
https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/ [https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/]
 
What is being described below is a modeless window displayed when the button is activated and with a role of dialog and not a tooltip.
 
 
From: Juliette McShane Alexandria <mcshanejuliette@gmail.com>
Sent: Wednesday, October 22, 2025 5:43 AM
To: Richter,Susan <susan.richter@nscc.ca>; w3c-wai-ig@w3.org
Subject: Re: Accessible Tool Tips
 
Hi Susan,
 
Taking a look at the underlying code the element to trigger the tooltip is a <span> with scripting applied. What's happening right now is that the tooltip content is only exposed in the code when it's visible and because the triggering element is not keyboard focusable and doesn't have scripting applied to expose the content for keyboards it's never in the code in a way that a screen reader can access it. 
 
The triggering element needs to be keyboard focusable - typically a <button> element. The button's name should be "information" or similar, and the tooltip content associated with the button via aria-describedby. When a screen reader user lands on the button they'll hear "Information" as the name of the control and if they have their screen reader set to announce descriptions, they'll hear the tool tip content.  I've included a code pen example (https://codepen.io/zenytha11y/pen/rNYvmeN)
 
Note that for idea usability, particularly if there is more than a sentence or so of content within the tooltip, you'd want to explore a toggle tip. A toggle tip is similar to a tooltip except that it is exposed o click and on keypress instead of hover and focus. It can be dismissible with the escape key (as is most common for tooltips) or have a discrete close button added. The benefit of a toggle tip is that screen reader users have access to the HTML structure of the content and can navigate using their arrow keys to review or re-listen to part of it. Using aria-describedby (as is necessary for a tooltip) doesn't allow the aria-describedby content to be navigated that way - it just announces the tooltip content in a single stream.
 
Hope this is helpful!
 
Best,
Juliette
On 10/21/2025 11:12:24 AM, Richter,Susan <susan.richter@nscc.ca> wrote:
Hey everyone,
 
I have another question for the group. Wondering if anyone out there has any examples of accessible tool tip implementations.
 
Here are two examples of what we’re currently using:
On a form: https://www.nscc.ca/programs-and-courses/programs/default.aspx [https://www.nscc.ca/programs-and-courses/programs/default.aspx]
On a content page: https://www.nscc.ca/programs-and-courses/programs/programfees/program.aspx?pfid=153 [https://www.nscc.ca/programs-and-courses/programs/programfees/program.aspx?pfid=153]
 
In both cases, the little green info bubble has a hover action. When I test this with JAWS screen reader, you can’t access the content of the tooltip via tab because it’s not a link and therefore just gets skipped over. And when using the arrow keys to proceed logically through the content of the page it also gets skipped over completely. We’ve been testing out some options (not implemented on the pages above) but none of them seem quite right so they’re still in development. So, I was wondering if anyone had any examples they could share of tooltips that are working for screen reader and keyboard users.
 
Thanks in advance.
 
Susan Richter
Senior Web Interface Developer
Digital Products & Experience
Nova Scotia Community College
Institute of Technology Campus
Web: nscc.ca [http://www.nscc.ca/?utm_source=email-sig&amp;utm_medium=email&amp;utm_campaign=email%20signature%20link]
 





This communication (including any attachments) may contain privileged or confidential information of Nova Scotia Community College and is intended for a specific individual. If you are not the intended recipient, you should delete this communication, including any attachments without reading or saving them in any manner, and you are hereby notified that any disclosure, copying, or distribution of this communication, or the taking of any action based on it, is strictly prohibited.
[8d91cff9-6a65-4301-b260-12b0f9d73696]
[b4c2c295-c0f4-4440-81a1-c4550b981d6c]