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.