WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: best tooltip markup and behavior?

for

From: GILLENWATER, ZOE M
Date: Dec 7, 2011 1:45PM

Thanks for your response, Jared. 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>

Hide the span with display:none, reveal it on hover and focus. Use scripting to return false on that link (or some other method to take care of the bogus # link destination).

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. 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? That's not hovering or focusing, so the span wouldn't reveal. Does the script need to take over at this point so that pressing the Enter key when on the link also reveals the span?

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.

-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Jared Smith
Sent: Wednesday, December 07, 2011 3:26 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] best tooltip markup and behavior?

On Wed, Dec 7, 2011 at 12:06 PM, GILLENWATER, ZOE M wrote:

> 1. Is the trigger element-in this case, a question mark icon to denote "help" or "more info"-best marked up as a <button> surrounding an <img>

I would make it a link. The truth is that there isn't really a native
element for this type of thing - interactive, but not a link or
button. I think buttons should be reserved for form submission or
button-like actions. Links, on the other hand, are used for all sorts
of things.

> would a plain <img> be better? (Tabindex and scripting would allow focus to get to it, of course.)

This seems like a lot of effort when a link will do this naturally.

> Another option is to put the tooltip text in the img title attribute and use scripting to reveal and style that title attribute, but this didn't seem ideal to me as the tooltip wouldn't be visible to those with JavaScript disabled.

If you need something that works without JavaScript, then title
attribute is your only possibility, but this would rarely be read by a
screen reader, and isn't available to keyboard users, touch screen
users, etc.

> 3. I don't think the tooltip text should be read by the screen reader in normal mode, just reading straight down the page.

> 4. When the screen reader user instead tabs directly to the trigger, should the tooltip immediately be read

If the tooltip appears when the user hovers the mouse over an element,
the equivalent keyboard action is generally onfocus - it should appear
when they tab to it. In this case, you can simply duplicate hidden
text or place the tooltip text within the link. Or you could use
aria-describedby on the link to reference the visible tooltip element
(with role="tooltip"). In both cases it would be read on link focus.

If the tooltip only appears on mouse click, the keyboard Enter or
Space is the equivalent. In ARIA jargon, this isn't a tooltip, but...
hmmm.... it appears that, surprisingly, there isn't an ARIA widget or
pattern for this type of thing. It's not really a "dialog" and it's
not really a "menu". I would assume that adding aria-haspopup to the
link and treating it as a menu or dialog, but without giving it one of
these roles would do the trick.

Does anybody else have ARIA recommendations for keyboard activated
(meaning Enter, not focus) tooltips?

Jared