WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: best tooltip markup and behavior?

for

From: GILLENWATER, ZOE M
Date: Dec 8, 2011 7:21AM

Hi Jared,

Thanks again for more info. I don't know how to respond inline with yucky Outlook, so I'll paste the relevant pieces up here instead. I hope it's clear!

You said:
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.

My response:
Yes, which is nice. But the disadvantages are that the user has to hear the tooltip text when reading through the page (I consider that a disadvantage in this case, though it could be argued otherwise), you get a focus outline around the tooltip instead of just the trigger, and a user might try to activate the bogus link.

You said:
If you want to position...

My response:
I want whatever is best. :-) What do you think I should do? Anyone else want to weigh in too?

You said:
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...

My response:
I didn't know this! Thanks very much for the info. Dang, though! It would have been so nice to be able to only let the text be read on focus.

You said:
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).

My response:
Surely this isn't true? I just opened up a screen reader again myself to make sure I'm not crazy and misremembering something major. :-) If I just let the screen reader read through the page, and it starts to read the text of a link, I just press Enter to activate that link. I don't have to press Tab to focus the link and then Enter. Are we misunderstanding each other?

Thanks,
Zoe


Zoe Gillenwater
Technical Architect, Design Standards Accessibility
Creative Experience Team
AT&T eCommerce

o:  919-241-4083
e:   <EMAIL REMOVED>

This e-mail, and any attachments, are intended only for use by the addressee(s) named herein and may contain legally privileged and/or confidential information. It is the property of AT&T. If you are not the intended recipient of this email, you are hereby notified that any dissemination, distribution or copying of this email, any attachments thereto, and any use of the information contained is strictly prohibited. If you have received this email in error, please notify me at 919-241-4083 and permanently delete the original and any copy thereof.


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