4. Interactive WAI-ARIA (Basic)
Tooltips
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. They provide 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
- role=”tooltip”
- aria-hidden:[true|false]
- aria-live=”polite”
- tabindex = [0|-1]
The following JSFiddle presents a typical tooltip. Review the JavaScript and HTML markup. Test the tooltip presented under the Result tab with ChromeVox to understand how it functions without any accessibility features added. You can work in JSFiddle by clicking “Edit in JSFiddle”, copying the accessibility/WAI-ARIA code described below to fix the accessibility of the tooltip before completing Activity 6 on the page that follows.
The first thing to add to the init() function, where the tooltip <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, 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. Instead, we 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 focus to .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 ($elem) definition.
Adding Keyboard Operability
WAI-ARIA best practices defines keyboard interaction for a tooltip as follows:
Recommended Keyboard Interaction for a Tooltip
Tooltip widgets do not receive focus. A hover that contains focusable elements can be made using a non-modal dialog.
- Esc: Dismisses the Tooltip.
Note:
- Focus stays on the triggering element while the tooltip is displayed.
- If the tooltip is invoked when the trigger element receives focus, then it is dismissed when it no longer has focus (onBlur). If the tooltip is invoked with mouseIn, then it is dismissed with mouseOut.
.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.
Accessible Tooltip in Action
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 when its content is read aloud. Pressing the Tab key once again, move focus to the text input field, 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.
Video: Accessible Tooltips
