These are the slides from the John Slatin AccessU 2016 presentation on Accessible Data Visualizations by Michelle Michael. Michelle's classroom presentation style is to look at real world examples, and invite audience participation throughout. She also presented this information in a webinar for the Environments for Humans AccessU Summit. Descriptive slide notes have been included below.

1. Accessible
Data Visualizations
John Slatin AccessU • May 10, 2016
Michelle Michael • Digital Accessibility Evangelist
Linkedin.com/in/MichelleRMichael
AccessibleMichelle@gmail.com

2. Accessible Data Visualizations
Introductions

3. What formats can it be published in?
Consider software features and assistive technology support for your file format:
PowerPoint has the least features and support since data tables cannot be made accessible.
Simple tables can be made accessible (meaning headers can be identified for screen readers) in MS
Excel and Word, however only the JAWS screen reader recognizes these.
PDF and HTML have the most features and support for accessibility. They both support making
complex tables accessible. HTML offers the most features for making content accessible.
Be flexible about file formats for publishing.

4.  Cognitive Challenges
 Keyboard Only
 Sighted Users
 Screen Readers
Data Visualizations for Everyone
Remember to design and code for these users.

5. Cognitive challenges affect not only people with cognitive disabilities like TBI or ADHD, but the
general populous as well. Microsoft published a study in 2015, where they found that the average
adult attention span in the year 2000 was 12 seconds. The attention span of a goldfish is 9
seconds. And in 2015, the average attention span of an adult was less than that of a goldfish, at 8
seconds.
 Cognitive Accessibility

6.  People want an easy
button. They don’t want to
think. Steve Krug
published a book on UX
called “Don’t Make Me
Think”. And that’s the way
we need to look at data
visualizations. Creating a
data visualization is
creating a user
experience.
Data Viz is…
User Experience
Better UX = Better A11y

7.  To address
cognitive
disabilities and
short attention
spans, we need
to ask this
question.
What is the best way to make
the information pop?

8. What is the best way to make the
information pop?
 Here is a pie chart of Titanic
Survivors by Age. There are 8 slices.
Each slice of the pie has numbers
next to it, such 21 to 30, and 11 to
20. During the first 8 seconds of
observing the chart, one sees the
chart title, a bunch of numbers
around the pie, each pie piece is a
different color, and then they may
start to realize each slice represents
an age group.

9. What is the best way to make the
information pop?
 The same information has now been put into a bar chart, reading
from left to right: The first bar is labeled 0 to 10. The next bar is
labeled 11 to 20, and so on, up to the last bar that represents ages
71 to 80. Since it reads left to right, in a chronological fashion, it is
much easier to quickly understand the chart and see that the largest
age group of survivors was 21 to 30 and that very few in the elderly
age groups, comparatively, survived as those bars are extremely
short. Experiment with different chart types to see which one makes
it the easiest to quickly read and draw out the most important
information.

10.  A picture from “Goldilocks
and the Three Bears” is
shown. You want to strive
for not too many, not too
few, just the right amount of
labels to convey the
information intended to be
conveyed.
Pay Attention to Labels

11.  An attractive bubble chart with
gradient fills is shown. There are 6
bubbles, each labeled with a different
car maker. The horizontal axis goes
from -20 to 70. The vertical axis goes
from -50 to 200. There are no labels
indicating what the numbers
represent on either axis. So while this
is a very pleasant chart to look at,
meaning is lost because there are too
few labels.
Axes not
labeled.

12. Revisiting the previous bar chart of Titanic
Survivors by Age, consider whether there are
enough labels.It really depends on what
information you want to convey to your
audience..
Enough labels?
Depends…
Relative
amounts
are clear.
Enough labels?
Exact
quantities are
unknown.

13. What is the best way to make the
information pop?
Source: HubSpot Article at http://blog.hubspot.com/marketing/tips-designing-effective-visual-content-infographic
This image shows 2 pieces of information in a “Wrong”
design on the left and a “Right” design on the right. It
says to use callouts sparingly to highlight only key
information. On the “Wrong” side, 4 combinations of
font/background colors have been used: orange on
white, white on orange, black on white and light teal
on teal. On the “Right” side, the text is simply black on
a white background, and the metrics are in large bold
orange font. The first metric, 23.1 million is enclosed
in a white circle with a teal border. The second metric,
65% is enclosed in a doughnut chart that provides a
visual representation of 65%. Color and symbols were
used to highlight the key information while the rest of
the text is very plain.

14. What is the best way to make the
information pop?
Source: HubSpot Article at http://blog.hubspot.com/marketing/tips-designing-effective-visual-content-infographic
Again, this image shows 2 pieces of information in a
“Wrong” design on the left and a “Right” design on the
right. It says all fonts should be legible and appropriate
for what you are communicating. Each design is simply
the three words, “Social Customer Service.” On the
“Wrong” side, each word is in a different font, and the
word “Customer” has alternating orange and gold
letters. On the “Right” side, all words are in one font, a
sans serif font, in black text on a white background.
There is a thin orange line underscoring the words.
Sans serif fonts tend to be the best for accessibility, and
consistency in font styles is important.

15.  Keyboard Accessibility
 All information needs to be accessible
using only the keyboard.
 Mouse Click
 Mouse Hover (avoid)

16.  Keyboard Accessibility
 The best practice for coding HTML
content that requires a mouse click,
is to use:
 A native link
 A native form control
 A custom form control

17.  Keyboard Accessibility
Custom HTML Button Example
This was a
discussion
slide with a
video.

18.  Keyboard Accessibility
Comments about DataViz Tools
This was a discussion slide. HTML
generated by BI tools tend to be
spotty on keyboard accessibility.
Microsoft Excel content within the
grid is keyboard accessible, but
floating content in Excel is not
accessible, including charts and
comments. There are ways to
create accessible alternatives for
these features that were shown in
class.

19.  Sighted Users & Accessibility
 Color Contrast
 Screen Magnification
 Color Blindness

20.  Test with a color contrast tool.
e.g. Paciello Group Color Contrast Analyser
Check Color Contrast

21. When in doubt, use a tool to test for color contrast. It’s not always intuitive. This
slide shows four examples:
A. Black on green, which passes for large text but not small text.
B. Purple on a white background which passes for all font sizes.
C. Light gray on a yellow background, which fails for all font sizes.
D. Red on a white background which passes for large text, but fails for
small text. For small text, use a darker red, such as cranberry.

22. Consider Color Blindness
 Most people know about red-green color
blindness which is protanopia. There’s
also yellow-blue color blindness, or
tritanopia, as well as many other types,
including total color blindness.

23.  Print or view in grayscale and see if the
information is still accessible.
Consider Color Blindness

24.  Consider the colorful
bubble chart
discussed earlier.

25.  When viewed in grayscale, the
information is equally accessible, or in
this case, equally inaccessible since
there are no labels on the axes. But
color is not the reason it is inaccessible.

26. Chart with Color Legend - Not Accessible!
 Here is a pie chart with a color legend. It’s been put in
grayscale, and immediately you can see that without
being able to see the colors, it is impossible to
associate the legend with the chart. This chart can
easily be made accessible by adding the legend text
next to each pie wedge, or by associating a symbol or
letter (A.B.C., etc.) with each pie wedge.

27.  Organize digital content using commonly
known reading layouts.
Text is readable from left to right, top to bottom.
Consider Screen Magnification

28.  This is an infographic template that shows a diagram
that starts in the lower right side of the page, circles
up and left in a reverse figure 8. This would be
extremely difficult for someone using screen
magnification to orient to and gather the information.
 Avoid layouts that require an unusual
reading order.

29. Screen readers announce charts, diagrams
and infographics as images…
 Screen Reader Accessibility

30. Screen Reader Accessibility
1. Add alternative text.
This is a short description, such as “Pie
Chart of Spending by Department”.
2. Create an accessible text alternative
that includes all data in the visualization.

31. Accessible Text Alternatives
For screen readers to
have equal access to data
visualizations, consider
providing:
 An accessible data
table with all data
points in it.
 A “long” description
that describes the
trends in the chart.
Note: Long description refers to a
concept, not a specific implementation.

32. This slide shows a line chart of
General Government Expenditures
Per Capita (in USD) for Switzerland,
the UK, and the US. Underneath the
chart is a long description.
Underneath the long description is a
data table. On this slide we looked at
examples and discussed several
ways to implement these kind of
accessible text alterantives in Excel
and HTML.

33. Accessible Text Alternatives
Note: A data table may
not be needed - or
relevant - if all of the
information can be
captured in a long
description.
Examples: charts with
only a few data points;
visualizations not based
on tabular data, such as
infographics, flow
diagrams
 A bar chart is shown with only 5 data
points for Elementary School Class Size
from 2006 through 2010. Each “bar” is
represented by a school pencil.
 An example of an accessible infographic
was shared.

34. Accessible Text Alternatives
For dynamic data
visualizations:
 Consider using a
dynamic long
description.
An example was shared in class.

35. A sampling of logos
is shown: Tableau,
IBM Cognos, Crystal
Reports.
DataViz Tools & Screen Reader A11y
 Generated content is usually not
accessible for screen readers out of the
box.
 Often the best options are to export the
data to Excel or HTML, and make those
accessible – and as seamlessly
integrated as possible.
 We need to continue to push on vendors
to generate accessible content.

36.  Cognitive Challenges
 Keyboard Only
 Visual Impairments
 Screen Reader
Data Visualizations for Everyone

37. “…our job is to take responsibility
for the complete user experience.”
– Steve Jobs
A profile view of a
head is shown with a
bunch of words
overlaid in many
different directions:
User, Experience,
Design, Scientist,
Analyzing, Visual,
Research, etc.