Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Data Visualization Foundations!
You have completed Data Visualization Foundations!
Preview
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