A tooltip is typically used to display some information about its owning element when a user hovers a mouse pointer over or gives keyboard focus to an element. Tooltips might include a definition for a word, perhaps full wording for an acronym or abbreviation, or maybe instructions on how to operate a tool or widget. There are many possibilities.
Tooltips are an enhancement for the default “title text” standard with HTML, providing much more flexibility in the presentation and types of information that can be presented than a standard title text tooltip.
WAI-ARIA roles, states, and properties used in a tooltip
The first thing to add to the
init() function, where the tootip
<span> element is defined are the WAI-ARIA attributes. First define the tooltip with
role="tooltip". Hide the tooltip by default with
aria-hidden="true". Also add a live region with
aria-live="polite" so screen readers automatically read the tooltip when it appears. Note that the WAI-ARIA 1.1 best practices recommend using
aria-describedby within the owning element to reference the content of a tooltip, which does not announce as expected with current versions of Chrome, so here we have decided to use
aria-live, which announces correctly across all current browsers.
Next add keyboard focus to the element the tooltip belongs to with
tabindex="0", and add
.on('mouseover') so both a mouse hover and keyboard focus open the tooltip.
Also, further down in the owning element’s definition, add
aria-hidden="false" so the hidden-by-default tooltip becomes visible when the mouse hover or keyboard focus occurs.
Also added here is
aria-hidden="true" to be sure the tooltip is hidden from screen readers, should a mouseout event close the tooltip, adding it to
.on(mouseout) chained to the element (
WAI-ARIA best practices defines keyboard interaction for a tooltip as follows:
Keyboard operability for a tooltip, or rather the owning element, is relatively simple. As a keyboard equivalent for the
.on(mouseout) described above,
.on(blur) is chained to the
$elem element and within it
aria-hidden="true" hides the tooltip again, if the mouse pointer is not over the element.
Also, if the Esc key is used, add
aria-hidden="true" to hide the tooltip, even if the mouse is hovering, or the owning element has focus.
Watch the following video to see how ChromeVox interacts with a tooltip. The Tab key is used to navigate to the first tooltip, which opens a live region with its content read aloud. Pressing the Tab key once again, move focus to the text input filed, and a second tooltip opens and its content is read aloud. Aim to have the tooltips you update in Activity 6 on the following page operate and announce like the one in the video.
Submitted 3 years 7 months ago by Visitor (not verified).