Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
In this video, we’ll be discussing how to design accessible data visualizations. By accessible, I mean designing your visualizations so disabled users can understand them.
Treehouse Courses
How to Design Accessible Visualizations
- Don’t rely on color alone to explain data
- Follow color contrast guidelines
- Label data points directly
- Avoid hover overlays
- Provide alternate descriptions
- Use plain language
Further reading
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In our last video, we examined
sketching as part of the brainstorming
0:00
process in preparing for
a data visualization.
0:04
The sketches we looked at were executed
primarily using a black marker with
0:08
occasional blue highlights.
0:13
In this video,
0:15
we'll discussing how to design
accessible data visualizations.
0:16
By accessible, I mean,
designing your visualizations so
0:20
disabled users can understand them.
0:24
The reason I'm bringing attention to the
lack of color in the set of sketches we
0:28
reviewed is it leads to our first rule
of designing accessible visualizations.
0:32
Don't rely on color alone
to explain the data.
0:37
I'm looking at a chart called the Daily
Routines of famous creative people, and
0:42
at first glance, it's pretty interesting.
0:45
If you were curious to know that
Franz Kafka wrote all night and
0:48
slept in short bursts, both before and
after his day job, now you do.
0:52
However, I'm going to use Chrome's
DevTools to test this in greyscale.
0:58
To do so, open Chrome's DevTools and
click the three little dots in the upper
1:03
right corner, then choose More
tools followed by Rendering.
1:08
Scroll almost to the bottom
of the Rendering menu.
1:13
And here's a drop down called
Emulate vision deficiencies.
1:16
I'm going to choose Achromatopsia,
which means total color blindness.
1:20
In grayscale, it's pretty difficult
to use this chart, isn't it?
1:25
We're left to guess what each of
the different shades of gray represent.
1:29
And while total colorblindness like
this is not especially common,
1:33
it's estimated that one in 12 men have
red-green color vision deficiencies.
1:37
We looked at Wall Street Journal's job
market tracker in a previous stage,
1:43
but let's check it out again using
Chrome's emulate vision deficiencies tool.
1:47
And this time I'll choose Deuteranopia,
1:53
which means trouble
distinguishing red from green.
1:55
As you can see, this chart is now
much more difficult to understand.
1:59
While it's perfectly acceptable to
use color to distinguish datasets
2:04
in your charts, the problem with both of
these examples is that color is the only
2:08
visual cue available to
understand the information.
2:13
I'm looking at an article on accessible
data visualization by Amanda Miller and
2:17
she recommends making sure your
colors have sufficient contrast.
2:22
Users unable to distinguish
between red and
2:27
green can still distinguish between
a dark color value and a light one.
2:29
If the job market tracker had used dark
shades to represent high unemployment,
2:34
and light shades to
represent low unemployment,
2:39
the chart would have better
supported colorblind users.
2:42
In addition, label your data
points directly whenever possible.
2:46
In the chart seen on the left,
there's no question which line represents
2:50
pancakes and
which line represents waffles.
2:54
This chart also introduces the possibility
of using pattern as well as
2:58
color to distinguish data points,
3:02
since the dotted line is obviously
different from the solid one.
3:05
While websites sometimes rely on
hover states to label data points,
3:09
that's something you'll want to avoid.
3:13
Don't forget that touchscreen
users on phones and
3:16
tablets won't be able
to see your overlays.
3:19
In addition, users with disabilities
related to motor skills might
3:22
have difficulty hovering
a mouse over your chart.
3:27
If some of you are thinking
these guidelines sound familiar,
3:31
that's because recommendations for both
providing sufficient color contrast and
3:35
never relying on color alone
to communicate information
3:40
are both found in the WCAG or
the Web Content Accessibility Guidelines.
3:44
I've linked to a separate course on web
accessibility in the teacher's notes
3:49
if you're curious to learn more.
3:54
Many of the WCAG guidelines have
to do with helping users of
3:57
assistive technology
understand your content.
4:00
By assistive technology, I mean devices or
4:04
software that help disabled
users navigate the Internet.
4:07
For example, blind or
4:12
low vision users rely on screen
readers to read out text content.
4:13
Supporting screen readers means providing
alternate descriptions for your images.
4:19
Unfortunately, charts are much more
difficult than photographs to describe.
4:25
In an article called Writing Alt Text
for Data Visualization,
4:30
author Amy Cesal lists four tips for
4:34
describing a data visualization starting
with listing the type of chart.
4:36
Is it a pie chart? A line chart?
4:41
Second, describe the type of
data included in the chart.
4:44
If your chart uses x and
y axis labels to help measure the data,
4:48
that's useful information to
include in your description.
4:52
Third, describe the reason for
including this chart.
4:57
If your chart is part of
an online news article,
5:00
what relationship does the chart
have to the rest of the article?
5:02
Finally, provide a link to
the source of your data so
5:07
curious users may click to learn more.
5:10
Cesal provides an example of this method.
5:13
This is a bar chart of gun murders
per 100,000 people where America's
5:16
murder rate is six times worse than
Canada and 30 times Australia.
5:21
If you're saying, I'm not a web developer,
writing the code for
5:27
providing alternate text
isn't my responsibility.
5:31
Remember that publishing content
to a website requires coordination
5:35
between teams.
5:39
If you're not the person who writes
the code to get your charts onto the web,
5:41
make sure to communicate accessibility
requirements to the team that does.
5:46
Finally, when providing labels and
context for your charts,
5:51
be sure to use language that's as clear
and as understandable as possible.
5:55
I'm looking at a Paris traffic
jam as viewed by Google Maps.
6:01
While a map is a fairly
complex data visualization,
6:06
look at all the ways Google Maps
communicates information to the user.
6:09
In the map view,
we see both an auto accident icon and
6:14
a time estimate of the slow down.
6:18
Google also let us know that we're still
on the best route, despite much heavier
6:20
traffic than usual and to expect
parking to be difficult when we arrive.
6:25
The combination of graphs, symbols,
and simple sentences helps reassure
6:30
users who are understandably
stressed out by the traffic jam.
6:35
And helps users with cognitive
disabilities who might struggle with more
6:39
complex sentences.
6:43
I've included a link to plainlanguage.gov,
one of my favorite resources for
6:46
learning to write clear, understandable
sentences, in the teacher's notes.
6:50
So that's a brief look at making your
data visualizations more accessible.
6:57
In our final video, we'll take a look
at ethical considerations when
7:02
communicating data to users.
7:07
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up