WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: best tooltip markup and behavior?

for

From: Jared Smith
Date: Dec 7, 2011 1:24PM

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