WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: accessible tool tips

for

From: Bryan Garaventa
Date: Jul 31, 2017 2:29PM

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 REMOVED>
415.624.2709 (o)
www.LevelAccess.com