Tooltip

In practice

The exception catches people out, because it protects the worst mechanism on the list. A browser tooltip drawn from the title attribute is excepted from this rule, and W3C names it directly, on the grounds that the browser controls how it looks rather than you. Excepted is not endorsed. The Understanding document is careful to say the rule does not attempt to solve those problems, and the main one it leaves standing is that a title tooltip cannot be reached by keyboard in most browsers. Naming is the place people get this backwards. W3C has a technique for using title as a form control's accessible name where the design leaves no room for a visible label, so title is a sanctioned last resort rather than an automatic failure. What it does not excuse is a control whose purpose a sighted user cannot work out either, because that technique asks for both.

The rule reaches more than tooltips. W3C names custom tooltips, sub-menus and other nonmodal popups that appear on hover and focus. So a navigation menu that opens on hover is governed by this criterion, and nobody thinks of it as a tooltip. Skip links are explicitly outside it, because a hidden control revealed on focus is the thing itself rather than additional content.

One thing W3C's own pattern does settle is that a tooltip never receives focus. That rules out the common design with a link or a button inside it, and W3C's answer is that a hover panel containing something to click can be built as a non-modal dialog instead, which is a different pattern owing its own set of promises. The pattern also asks for Escape to dismiss, and where the keyboard opened the tooltip, focus stays on the trigger throughout.

Why it matters

Tooltips end up carrying the explanation for icon-only buttons more often than teams realise, which puts information somebody needs behind an interaction a large group cannot perform. The people W3C names as benefiting are not the ones most teams picture. Readers using magnification, who would otherwise have to zoom out to see the thing. People running a large mouse cursor that covers what they are pointing at. People with low vision or cognitive disabilities who need time to take it in without distraction. And people whose pointer accuracy is low, who set tooltips off by accident and need a way to get rid of them. Only one of the three conditions has a numbered failure behind it, which is worth knowing when a report cites nothing for the other two. Absence of a failure document is not absence of a defect.

Where this shows up on the site

• Rule 1.4.13 Content on Hover or Focus
• The hover content technique

Related terms

• Accessible nameThe accessible name is what assistive technology announces an element as, the words a screen reader speaks when it lands on a button or a link.
• Keyboard accessibilityKeyboard accessibility means every piece of functionality on the page can be operated through a keyboard interface.
• FocusFocus is the one place on a page that is currently taking keyboard input.
• Screen magnifierA screen magnifier enlarges part of the screen, from the zoom built into every operating system up to dedicated software like ZoomText.
• Accessible descriptionAn accessible description is the extra line a screen reader reads out after the name, and the word the specification uses for what it does is complements.