Accessibility-Audit of Interactive Infographics

Department of Equality, Diversity, Inclusion (EDI) of the University of Zurich

A picture of two persons infront of a laptop display and one person points at the display.

For the University of Zurich’s Equality, Diversity, Inclusion (EDI) department, we identified existing barriers of interactive infographics and empowered EDI to address them by providing appropriate recommendations for improvement.

  • 7

    verified infographics

  • 55

    verified criteria

  • 1

    Test report (accessible PDF)

  • 7

    verified infographics

  • 55

    verified criteria

  • 1

    Test report (accessible PDF)

Different infographics which were analyzed during the accessibility audit.

Interactive infographics: between complexity and accessibility

The infographics examined make extensive use of visual coding and interactions: values are conveyed in diagrams through color, segment size, and position, while details are sometimes presented through states such as selection/highlighting or via pop-up tooltips. These factors make the creation of accessible interactive infographics particularly challenging.

When information is conveyed purely visually, an additional, non-visual equivalent is required, for example through text alternatives. Additionally, it is necessary that the interface can be operated without a mouse. Complex visualizations, such as those with multiple axes that respond to settings, also place high demands on meaningful focus navigation and comprehensible output for screen readers, so that users can understand the information presented in the infographics.

A picture of a graphic which demonstrates the criteria of contrast and color for better accessibility.
Audit of the infographic “Leaky Pipeline”.

Identify barriers, leverage interactions

The audit was conducted in accordance with the Web Content Accessibility Guidelines (WCAG) 2.2 at Level AA. During the audit, we paid particular attention to the typical requirements for interactive charts:

  • All elements are accessible via the keyboard and are focused logically.

  • Screen readers announce changes in the state of interactive elements in a clear and understandable manner.

  • Graphics are comprehensible and understandable without color perception.

  • Fonts are sufficiently large, and colors provide adequate contrast.

  • Usability is ensured even on small displays or when using the zoom function.

In the audit, we didn't only identify barriers but also translated them into concrete and actionable improvements for the further development of the infographics.

Foto von Marie-Louis Zucker von EDI, die für die Kommunikation zuständig ist.

Marie-Louis Zucker Communication Department EDI

  • 7

    verified infographics

  • 55

    verified criteria

  • 1

    Test report (accessible PDF)

Cases

Project idea? Get in touch!