WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: best tooltip markup and behavior?

for

From: Jared Smith
Date: Dec 7, 2011 4:00PM

On Wed, Dec 7, 2011 at 1:45 PM, GILLENWATER, ZOE M wrote:
> So is this the sort of HTML you had in mind?
>
> <a href="#">
>  <img src="icon.gif" alt="help">
>  <span role="tooltip">This is the tooltip text.</span>
> </a>

In this case, the role="tooltip" is not necessary. Instead, you would
position the text off-screen (NOT with display:none) and then position
it into the tooltip position when the link receives focus. You could
even do this entirely with CSS and not use scripting at all.

If you want to position the tooltip element outside the link, then it
would be something like:

<a href="#" aria-describedby="helptooltip"><img src="icon.gif" alt="help"></a>
<div id="helptooltip" role="tooltip">This is the tooltip text.</span>

The tooltip text would be hidden with display:none and then revealed
and positioned on hover and focus with JavaScript.

> Hide the span with display:none, reveal it on hover and focus.

Except that you need to be careful with display:none if the text is
inside the link. If link text is styled with display:none and then
changed to display:block when the link receives focus, JAWS will not
be read it because the text of the link is determined the moment it
receives focus (i.e., the text is invisible when it receives focus,
but when it becomes readable a slight moment later it is too late).

> This would allow screen readers to not have to read the tooltip text if they don't need it, as only the alt text and not the span text would be announced when reading straight through, but the span text *would* be automatically announced when they focus directly on the link.

If you use off-screen text, it will always be read as the reader is
going through the page. If you use display:none, it won't be read, but
in order for it to be read in JAWS on focus, it will have to be
outside the link, which necessitates JavaScript and ARIA.

> What about when the screen reader user is reading straight through, they hear something like "same-page link help", and they decide they want to follow that link to hear the help text? They press enter, and then what happens?

The screen reader won't trigger the link unless it has focus. They
would have to Tab to the link in order to activate it (except in
VoiceOver, which focuses links in reading mode).

But this still highlights an inherent issue with using links for
things that are not really links - the user might try to activate it
to go to a "Help" page. As I mentioned before, there's no suitable
alternative. If you use a <div> with tabindex=0, JAWS and NVDA read
"clickable", which isn't really much different than hearing "link".

To test things out, I put together a page at
http://webaim.org/temp/tooltip.htm that you can play with. It uses
very basic styling and inline scripting, but demonstrates how each of
these scenarios works a bit differently in different screen readers.

Jared