WebAIM - Web Accessibility In Mind

E-mail List Archives

best tooltip markup and behavior?

for

From: GILLENWATER, ZOE M
Date: Dec 7, 2011 12:09PM

I'm trying to decide on the best markup and behavior for help icons that show tooltips on hover and focus. There's not much out there on this topic; the description in the ARIA documentation is pretty brief and incomplete (http://www.w3.org/TR/wai-aria-practices/#tooltip<;http://www.w3.org/TR/wai-aria-practices/>;). Most examples out there deal with tooltips on form fields or link text, but I'm specifically wondering about tooltips on image icons, which seem to have some unique issues.

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>, with alt text on the <img> saying "help" or similar? I don't think a link is right, since the link wouldn't actually go anywhere. Then again, similarly, maybe <button> isn't best since the button wouldn't do anything-would a plain <img> be better? (Tabindex and scripting would allow focus to get to it, of course.)

2. Is the tooltip best marked up as a span that follows the trigger (or in the trigger?), initially hidden with display:none and then revealed on hover and focus? 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.

3. I don't think the tooltip text should be read by the screen reader in normal mode, just reading straight down the page. The trigger text like "help" would be, of course, but I guess this means the user would have to press enter when reading over the trigger in order to activate it, reveal the tooltip, and read the tooltip text. So maybe <button> does make sense...

4. When the screen reader user instead tabs directly to the trigger, should the tooltip immediately be read (again, following the reading of the trigger text)? Or is it better to have the screen reader user have to activate the button or use "say all" to choose to read the tooltip text?

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