E-mail List Archives
Thread: accessible tool tips
Number of posts in this thread: 2 (In chronological order)
From: Angela French
Date: Mon, Jul 31 2017 1:06PM
Subject: accessible tool tips
No previous message | Next message →
Hello,
We have information icons on a form where, when the user hovers a mouse over the icon, a tool tip is revealed that provides more detailed information.
We are trying to make a more accessible solution. I have found some supposedly accessible tool tip solutions, but when I try them with NVDA they are not read aloud.
Does anyone have an implementation they can share/point me to? This is an example of an accessible demo <http://heydonworks.com/practical_aria_examples/#input-tooltip>; that though I can see the tooltip appear, I can't hear it. Here is a second example<http://accessibility.athena-ict.com/aria/examples/tooltip.shtml>;. What am I missing here?
Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.sbctc.edu<;http://www.sbctc.edu/>;
From: Bryan Garaventa
Date: Mon, Jul 31 2017 2:29PM
Subject: Re: accessible tool tips
← Previous message | No next message
There are some important things to be aware of regarding dynamic tooltips. First the mappings for using ARIA Tooltips are shown in the table at
http://whatsock.com/training/matrices/#tooltip
Here is the live implementation of this:
http://whatsock.com/tsg/Coding%20Arena/Tooltips/Tooltip%20(Internal%20Content)/demo.htm
Some important details have to be considered which differ depending on the rendering method for the tooltips. In some cases like the one referenced above, the dynamic tooltips do not exist in the DOM until they are rendered after a slight delay, such as when mousing over or setting focus to the triggering element. So what is supposed to happen in this case, is that when focus is set on the triggering element, the aria-describedby attribute is programmatically set when the tooltip appears, thus firing a description_changed event in the accessibility tree. This is what screen readers are supposed to notice and use to announce the description text when it appears. However in IE11 this event has never fired reliably and never will because Microsoft is never going to release any further updates to the accessibility tree in IE going forward. As a result, I had to create an IE11 polyfill to get this functionality to work reliably in IE as well as others like Firefox, Chrome, and Safari.
In other cases the tooltip is always present in the DOM and is simply hidden or displayed using display:none / display:block, in which case aria-describedby can be set once and always be present on the triggering element no matter what the visual display of the tooltip is, which will cause it to be announced when the triggering element receives focus.
All the best,
Bryan
Bryan Garaventa
Accessibility Fellow
Level Access, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.LevelAccess.com
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela French
Sent: Monday, July 31, 2017 12:06 PM
To: WebAim Forum ( = EMAIL ADDRESS REMOVED = ) < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] accessible tool tips
Hello,
We have information icons on a form where, when the user hovers a mouse over the icon, a tool tip is revealed that provides more detailed information.
We are trying to make a more accessible solution. I have found some supposedly accessible tool tip solutions, but when I try them with NVDA they are not read aloud.
Does anyone have an implementation they can share/point me to? This is an example of an accessible demo <http://heydonworks.com/practical_aria_examples/#input-tooltip>; that though I can see the tooltip appear, I can't hear it. Here is a second example<http://accessibility.athena-ict.com/aria/examples/tooltip.shtml>;. What am I missing here?
Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.sbctc.edu<;http://www.sbctc.edu/>;