skip to content
Primary navigation
Keyboard

News

Data Visualization with WCAG 2.1: Content on Hover or Focus, and Pointer Gestures

Two of our data visualization experts discuss how to support and test the Guidelines Content on Hover or Focus, and Pointer Gestures for more accessible and usable websites and apps.

1/24/2024 12:53:21 PM

Multiple icons displaying various types of graphs and charts.

By: Nancy Rice, Research Scientist, Health Risk Assessment Unit for Minnesota Department of Health (MDH), and Becky Bernauer, Digital Accessibility Coordinator, Minnesota IT Services partnering with MDH.

Editor’s note: This is the latest article in our series “WCAG 2.1 – Improving Digital Accessibility.” Missed the first installments? Use the #Accessibility tag on our blog page then search the page for WCAG 2.1. Subscribe to be sure you get each installment in this series! (The link is at the bottom of this page.)

This is a quick review of two WCAG 2.1 success criteria – 1.4.13 Content on Hover or Focus, and 2.5.1 Pointer Gestures. The article is aimed at data visualization designers and developers who already have some familiarity with digital accessibility.

Content on Hover or Focus (AA)

This success criterion is intended to ensure the user is aware of content that pops up, and that the pop-up content is dismissible, hoverable, and persistent. Within visualizations, tooltips are often set to pop up when a person uses the mouse to hover over a feature, like a county in a map or a bar in a bar chart. At times, the tooltip will offer information that can’t be obtained elsewhere. A tooltip that disappears too quickly could prevent some users from getting the information, like keyboard-only users or blind or low-vision users. Therefore, a tooltip should persist until the user dismisses it by moving away from the feature or dismissing the content another way. 

On the other hand, if a tooltip is already showing or pops up unexpectedly, dismissing the content be can difficult, especially without using a mouse, making the visualization less accessible for some users.

One solution is to ensure that the tooltip is available to both keyboard and mouse users. However, some platforms, such as Tableau, do not currently support this functionality.

A simpler solution is to avoid the use of hover pop ups and tooltips within data visualizations. If tooltips are necessary, offer the information in another way, such as:

  • Directly from the web page in a table.
  • In text coded in html.
  • Via an accessible PDF file.
  • Within a downloadable table. 

When using pop-up tooltips, provide instructions when possible within the tooltip on how to dismiss the popup window, such as “Select the Escape (Esc) key to dismiss.” Data visualization creators should test for accessibility using only a keyboard for navigation and create a workaround when needed to provide sufficient information.

References

See 1.4.13 Content on Hover or Focus.

2.5.1 Pointer Gestures (A)

This success criterion concerns using a path-based gesture to accomplish a goal with a visualization. There are some examples in Tableau (and possibly other data visualization software) that could require complex keystrokes or mouse clicks. A couple of examples are: 

  1. Making multiple selections from areas on maps while holding down the Control key.
  2. Using a mouse to select multiple points in a scatter plot while holding the Control key. 

This complex action might be difficult for some users. In these cases, another option for making the selection would be needed, such as a pre-set group of points that can be selected with one click. For example, a pre-set filter for a group of counties in a region or a group of facilities. Fortunately, users can accomplish most tasks with simple gestures or by using filters within interactive visualizations. 

On mobile devices, some screen readers may require complex gestures to focus or read information. For example, Voiceover on iPhones and iPads natively require a rotor action (twisting two fingers in a circle, like turning a dial), to make a selection. This might be a hindrance to some users, but this interaction with the screen reader and mobile device is beyond the control of the data visualization creators. 

Testing

Data visualization creators should test their dashboards to ensure that users can easily access the elements without complex gestures on mobile devices (e.g., touch screens) and on desktops without a mouse. If gestures are complex, the data visualization creator will need to provide another way to accomplish the same outcome, such as:

  • Setting a button programmed to accomplish basic common data requests.
  • Providing information in an easily accessible format, such as a table available from a panel that can be revealed by selecting a link.

References

See 2.5.1 Pointer Gestures.

 

Subscribe to our Newsletter

Would you like to learn more about the accessibility work being done by Minnesota IT Services and the State of Minnesota? Once a month we will bring you more tips, articles, and ways to learn more about digital accessibility.

Subscribe Today

Accessibility

Accessibility

back to top