Accessible Data Visualization and Digital Mapping

Amanda Tickner GIS Librarian MSU Libraries

Accessible Learning Conference 2019 MSU

General Comments Regarding Accessibility

  • Sight is a range – impairment is more common than blindness
  • Not being able to use a mouse, using tabbing to navigate goes beyond sighted/not sighted
  • Thinking in terms of improvement for everyone is a better frame than accommodation

WCAG Guidelines

  • Web Content Accessibility Guidelines (WCAG), now on WCAG 2.1
  • All non-text content that is presented to the user has a text alternative that serves the equivalent purpose
  • When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
  • Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
  • If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text (don’t put text in your jpegs)
  • The visual presentation of text and images of text has a contrast ratio of at least 7:1, graphical objects have a contrast ratio of at least 3:1 against adjacent color(s)

World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI) produced the WCAG guidelines

The Web Content Accessibility Guidelines, also known as WCAG (1.0), has been around since May 5th of 1999. 2.0 has been around since 2008, and 2.1 has been around since 2017.

1.4.13Content on Hover or Focus

Level AA(Added in 2.1)

Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:  Hide full description

Dismissable: A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content;

Hoverable: If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;

Persistent: The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.

Color is important, and problematic

  • Red/Green color blindness common
  • Rainbow is unintelligible
  • Culturally situated

An image of yeast cells is shown in gray scale (left), with a rainbow color scale (middle) and as a person with red-green color blindness sees the rainbow image (right).  From: Nuñez JR, Anderton CR, Renslow RS (2018) Optimizing colormaps with consideration for color vision deficiency to enable accurate interpretation of scientific data. PLoS ONE 13(7): e0199239.

Cividis: a better color scheme

How implementable is this? Colors don’t map effectively into RGB space, and they don’t give RBG equivalents. Mostly focused in instrument data, implementing into specific programs rather than general applicability.

Color Brewer,

Color is important, but contrast is key!

  • WCAG guidelines = 3:1 for graphics, 7:1 preferred (AAA) especially for text
  • Try to achieve 3:1 between colors used in your data visualization or map

WCAG 2 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Testing contrast: tools

Instead of thinking of foreground/background, think of elements of the map or data visualization to compare between parts of the graphic.

Shoot for

Which is the better option?

Compare “plain” bar chart to a circular bar chart, talk about clarity and parsing information

Which is the better option?

If one color is darker than another - it looks bigger...

Example Map: What’s Wrong, What’s Right

Embedded text = problem

Categories are distinct, 30% different, but background is an issue

Borders help

Alt Text is Critical

  • Include csv data table in addition to the visualization
  • Labels embedded in a data visualization or map image will not be read as such.

Go back to the last slide and think about alt text - pose the question

This helps us distill why we are creating a data visualization, and what it is depicting. Sometimes people put things in publications unthinkingly.

Example: discussion with colleagues where they thought lat/long of a map was an acceptable description in alt text… nobody thinks like that

Demonstration of alt-text and screen reader

  • Screen Reader: JAWS, reading headers and a line of data from a excel table of census tract information from Ingham county and associated data on flavored alcohol consumption

Tabbing capability is important for web objects

  • Not everyone can use a mouse
  • Adding text search to a map in addition to zoom is good usability
  • Example:

Haptic feedback, sounds and data

This is really turning data into art, in a sense


  • Other suggestions or thoughts on better accessible data visualization?

  • Ideas of references and good examples?

  • Thoughts on haptic and audio approaches to data visualization?

  • Do you have a favorite data visualization? What makes it your favorite? How accessible is it?

MSU Accessible Data Visualization and Digital Mapping - Google Slides