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, 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

  • role='tooltip'
  • aria-hidden:[ true | false]
  • aria-live='polite'
  • tabindex = [ 0 | -1]
Suggested Reading: For details on constructing accessible tooltips, refer to: WAI-ARIA Best Practices: TooltipsLinks to an external site..

The following JSFiddle presents a typical tooltip. Review the JavaScript and HTML markup, and 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.Skip JSFiddle

 

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 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
  1. Focus stays on the triggering element while the tooltip is displayed.
  2. 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.

Source: W3C WAI-ARIA Best Practices 1.1 (Links to an external site.)Links to an external site.

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.

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 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.

 

 

Monday, October 8, 2018 - 10:57 Submitted 2 months 2 days ago by Anonymous (not verified).