DO NO HARM GUIDE

CENTERING ACCESSIBILITY
IN DATA VISUALIZATION
EDITED BY JONATHAN SCHWABISH, SUE POPKIN, AND ALICE FENG
DECEMBER 2022
TABLE OF
CONTENTS
03 Chapter Five
Coding Accessible Data Visualisations
PART ONE
LÉONIE WATSON
Introduction
Chapter One Chapter Six
Creating Better Screen Reader Experiences
Centering Accessibility
SARAH FOSSHEIM
in Data Visualization
JONATHAN SCHWABISH
SUE POPKIN
59
PART FOUR
ALICE FENG
Accessibility Testing and Remediation
Chapter Seven
11 Practical Accessibility Testing for Data Visualizations
PART TWO LARENE LE GASSICK
A Framing of Why
Chapter Eight
Accessibility is Important
Infographic Equity in PDF Documents:
Chapter Two Designing with Accessibility in Mind
The Right Tools for the Job: Learning and DAX CASTRO
Building for Data Visualization and Accessibility
FRANK ELAVSKY
84
Chapter Three PART FIVE
Designing Data for Cognitive Load Accessibility in Teams
DOUG SCHEPERS and Organizations
Chapter Nine
31 Building Accessibility Best Practices Into Your
PART THREE Organization’s Data Visualization Style Guidelines
Alternative (alt) Text and AMY CESAL
Screen Readers
Chapter Ten
Chapter Four Nontechnical Barriers to Data Visualization
Writing Alt Text to Communicate the Accessibility in Government
Meaning in Data Visualizations MELANIE MAZANEC
ELIZABETH HARE

2 DO NO HARM GUIDE
PART ONE
Introduction
 Every day we are inundated with tables, graphs,
CHAPTER ONE
charts, and maps explaining everything, including
Centering the unemployment rate, COVID-19 vaccination
rates, baseball home run launch velocities, and
Accessibility our investment portfolios. When made well,
in Data data visualizations can help readers and users
Visualization find insights and make discoveries. When made
poorly, they obfuscate, mislead, or make it
difficult for people to use them effectively.
At the signing of the Americans with Disabilities Act 32 years
JONATHAN SCHWABISH ago, President George H. W. Bush remarked that the law would
enable “every man, woman, and child with a disability [to] now
pass through once-closed doors into a bright new era of equality,
independence, and freedom.” That promise remains unrealized.
SUE POPKIN
Disabled people still fight for full inclusion and equality when it
comes to employment, health care, access to transportation, and
more. And in today’s digitized era, people with disabilities do not
ALICE FENG have full access to many documents, reports, newspapers, data,
and data visualizations. This report is a guide to help close those
gaps and work toward a more inclusive and equitable world for the
more than the estimated 61 million people[1] with disabilities in the
United States today.

For years, the data visualization field has been largely inaccessible
to people who cannot process visual content the same way as
others. And when researchers and practitioners have focused their
efforts on creating accessible content, they have almost exclusively
addressed issues around color. Color vision deficiencies—or “color
blindness” in the common parlance—have been the primary focus
(and often the only focus) when data visualization developers and
communicators consider the needs of people who have visual
impairments. Creators focused their attention on avoiding red-
green color palettes because an estimated 4 percent of people
cannot distinguish similar shades of those colors. Less attention—
perhaps even no attention—is paid to people with other forms of
vision impairments, including blurriness, contrast sensitivity,
and blindness.

But disabilities extend far beyond sight impairments. Some people

cannot use a keyboard or mouse; some have attention management
difficulties; some have disabilities affecting balance or motion; and
some have learning disabilities such as sensory processing disorder

4 DO NO HARM GUIDE
or dyslexia. And combinations of these disabilities can As we reviewed and edited the various essays, five
affect different systems simultaneously. Moreover, clear themes emerged:
probably all of us have at some point had a temporary
Design with accessibility in mind from the beginning.
disability such as a broken arm, a migraine headache, • From creating static reports and graphs
or a concussion.
(Castro, Chapter 8), to building tools and
The creation and display of digital information usually platforms (Elavsky, Chapter 2), to procuring and
do not include accessibility practices for people with implementing those tools (Mazanec, Chapter
a wide variety of disabilities. As content creators, we 10), data practitioners will create better products
need to be mindful of new tools and guidance for by starting the process with accessibility in
making our work available equitably. By doing so, we mind rather than adding accessibility in as a
can ensure that everyone has equal access to accurate remediation step retrofitted at the end. Taking an
information and data. And when more people can accessibility perspective from the outset requires
access and process our information, the more likely it teams and individuals to critically consider what
is that our ideas, our data, and our analysis will actually the expected user experience will be; who will use
be used. the tool or data; and how visual elements like text,
colors, and online navigation will be consumed by
This third volume in the Do No Harm Guide series
the broadest audience possible.
from the Urban Institute seeks to provide in-depth
lessons on how to create visualization products that • Accessibility should not be a specialty. Anyone
are more accessible to disabled people. As with the working with data or creating digital content
other volumes in this series, one of the central themes should understand and strive to produce
in creating better, more equitable, and more inclusive accessible products. Although some of the
content is to center the work around empathy. By aspects of creating accessible online content
thinking carefully about the needs of all people clearly require technical experience, the work
and communities—especially those who have been should not be left to a single person or some
historically underrepresented and marginalized—we subset of the team. Mazanec (Chapter 10)
can create better and more accessible content. discusses how people at different levels in a
management hierarchy have their own roles to
As in the second volume, Do No Harm Guide: Additional
play, and Cesal (Chapter 9) lays out strategies for
Perspectives on Data Equity, we solicited the input of
creating data visualization styles and style guides
experts to help build a practical, actionable guide.
that incorporate accessibility. Elavsky (Chapter 2)
We identified several authors who have experience
calls for more resources to address the knowledge
creating accessible content, many of whom also
gaps many web developers have.
have lived experience with disabilities. We solicited
proposals from a select group of scholars and • There is no established definition for what
practitioners, then narrowed those proposals down makes a data visualization accessible. Although
to nine essays that would provide a comprehensive Web Content Accessibility Guidelines lay out
(though by no means complete) guide to creating requirements for making accessible websites, no
accessible data and data visualization products. We standards have yet been agreed upon for how to
also had an advisory board, consisting of four experts make data visualizations accessible. Our authors
in data, data visualization, and accessibility, who offer several ideas and approaches, including
reviewed the essays to ensure we did not omit any linking to the underlying dataset and adding
major issues or challenges. screen reader interaction to web-based
charts. Le Gassick (Chapter 7) walks through

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 5
 the specific issues to look for when conducting company to create a free, open-source tool to combine
accessibility tests. data and sound is also very promising.[4] This area of
data sonification is still in its early stages, but it holds
• People with disabilities should be involved in
potential for enabling people to interact with data in
the design of data visualization products and
new ways.
usability testing. Many of our authors urge data
practitioners to involve people with disabilities in Third, we don’t provide “an answer.” Perhaps we
the design and development of data visualizations started this work with the hope of finding a concrete
and data-driven products to ensure their needs answer on how to write alt text or how to approach
are met. Charts, graphs, and other content should different technical challenges. But the actual
also be tested by users with disabilities to identify experience, as usual, is more complex than imagined.
any usability or accessibility issues.
When creating this volume, we tried to follow a
• There is not a single right answer for writing core principle of the Disability Justice movement—
alternative (alt) text. The phrase alt text shows up “nothing about us without us.” We worked with and
a lot in this volume. Three chapters are devoted relied upon the involvement of people with disabilities
exclusively to helping you write better alt text in throughout the project, including contributors,
your graphs and documents. But there is no single advisors, and reviewers.
right answer or right strategy for writing effective
Our editorial team is also unique. Jonathan
alt text. The final visual product, the platform on
Schwabish is a researcher who focuses his data
which that product is being published, the target
visualization work on static graphs or relatively
audience, and the technology being used all
straightforward dashboards. Alice Feng is a data
influence the best approach. The guiding principle
visualization developer who creates unique and
is to write alt text that gives disabled readers
bespoke visualizations using JavaScript and other
as close to the same experience as nondisabled
object-oriented programming languages. Sue Popkin
readers as possible.
is codirector of Urban’s new Disability Equity Policy
As comprehensive as we believe this volume is, we are Initiative and the founder and coleader of Urban’s
still missing key elements of creating truly accessible Disability Affinity Group, which seeks to make Urban a
data and data visualization products and an accessible more equitable and inclusive workplace for staff with
web more broadly. First, this report omits how people disabilities. Between the three of us, we bring together
with certain physical disabilities use online content. technical expertise and the experience of living
How do and should data visualization tools, platforms, with disabilities. Popkin helped ensure the language
and websites enable people who cannot use a mouse and concepts in this volume reflect the needs and
or keyboard? Are there new technologies, platforms, perspectives of people with disabilities and ensured
and best practices that can help these users better use our work avoids ableist language and assumptions.
and experience the web? As with much of the language that seeks to promote
equity, language about disability is constantly evolving
Second, we do not investigate the (slowly) growing
and changing, but we have done our best to follow
use of sonification to communicate data. Some
Urban’s comprehensive guidance.
practitioners and media outlets are now using sound
to communicate data, such as piano notes aligned We also strive to make this volume as accessible as
with changes in political polling results in Germany[2] possible for a nontechnical audience. Much of the
or entire scores of sounds based on data values.[3] technical language is unavoidable—after all, creating
Interesting joint work between the Sonification Lab online content requires tools or programming
at Georgia Tech and the Highcharts data visualization languages that not everyone knows or understands—

6 DO NO HARM GUIDE
but our review process helped ensure these essays In Part 3 of the volume, we turn to testing and
include clear examples, clear language, and accessible remediation. Larene Le Gassick plays the role of
data visualizations and images. accessibility tester and demonstrates how to evaluate
a website or data visualization for accessibility. Dax
The essays in this volume do not need to be read
Castro dives into more detail, showing how to make
sequentially, though we have organized them with
PDF reports and standalone graphics more accessible
that approach in mind. We have divided the volume
by incorporating tags, alt text, and layers into your
into four main parts. The two essays in Part 1—from
documents.
Frank Elvasky and Doug Schepers—provide a big-
picture view of creating accessible content. Elavsky Finally, Part 4 takes an organizational view of
uses his work on the Chartability tool—a framework incorporating accessibility into the data and data
for creating accessible data visualizations—to make visualization workflow. Amy Cesal provides practical
the case for data tools that enable people to advice on how to create a data visualization style
build accessible content. Schepers explains the guide with accessibility at the forefront. And Melanie
foundation of how our eyes and brains work to Mazanec describes how existing rules and regulations
process visual content (“cognitive load”) and how in the US federal government are a good start for
those processes work differently for people with creating accessible content, although those regulations
different kinds of disabilities. have a long way to go before they’re ideal.

Part 2 of the volume focuses on creating alt text and Together, we hope these nine essays provide a solid
screen readers. Liz Hare provides some basics on foundation for beginning to think about how to create
how to think about and write alt text. She explores accessible content. You will find specific, detailed
two different models to write effective alt text and information on how to make single graphs, reports,
shows how users might incorporate those approaches and websites more accessible by considering the
into their work. Sarah Fossheim and Léonie Watson accessibility of colors, fonts, motion, and text. You will
explore best practices around screen readers—tools also find higher-level considerations around teams and
that are used by blind people, people with low vision, organizations, models for accessibility standards, and
and people with learning disabilities who consume ways to build more inclusive products.
text in audio formats. Fossheim provides an in-depth
This third volume of the Do No Harm Guide series
exploration of how screen readers work and how
does not cover everything—there are more avenues
to write alt text and add it to data visualizations.
to explore, platforms to evaluate, and solutions to
Watson provides technical guidance on how data
uncover. As with other reports in this series, the
visualization developers can use Accessible Rich
lessons described here are not fixed rules, but we hope
Internet Applications to create better screen reader
they provide a starting point at which you can begin
experiences in their online work.
your journey to create better and more inclusive work.
By doing so, you not only make it possible to hear
more voices, you also ensure your work is accessible
to everyone.

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 7
Chapter One Notes
1
https://www.cdc.gov/ncbddd/disabilityandhealth/infographic-disability-impacts-all.html
2
https://interaktiv.morgenpost.de/spd-absturz-sound/
3
https://www.loudnumbers.net/
4
https://sonification.highcharts.com/#/

8 DO NO HARM GUIDE
PART TWO
A Framing of Why
Accessibility is Important
 Since 2010, the number of websites in
CHAPTER TWO
existence has grown from less than a quarter
The Right Tools billion to nearly 2 billion,[1] and data visualization’s
explosive growth has followed across every
for the Job: domain: personal, corporate, government,
Learning and policy, and research.
Building for Data We collect far more data than in the past, and as a result, we have
started building faster and better tools to make that data useful.
Visualization and Now, we encounter charts and graphs for everything, such as sports,
local infection rates, stock prices, and elections.
Accessibility But these empowering advancements have not been made
available to people with disabilities. Those who are not able to
access these data visualizations are left with clunky, broken, and
ineffective systems.
FRANK ELAVSKY

Who do I mean by “people with disabilities?”

Well-meaning folks often assume that accessibility in
visualization focuses on visual disabilities, such as color
vision deficiency, blindness, and low vision. But interactive
data visualizations in complex tools and in applications
can also produce barriers for people with cognitive,
vestibular, and motor and dexterity disabilities. In fact,
this problem isn’t unique to visualization. One study found
that academic accessibility research disproportionately
focuses on visual disabilities.[2] When I write “people with
disabilities,” I refer to a broad spectrum of people. Not
everyone with disabilities will encounter barriers with data
visualizations, but I want to encourage you to consider that
most people with disabilities might.

Although for decades we have had the tools and standards to build
an accessible internet, 97 percent of the top million website home
pages still fail basic, automated accessibility tests, according to the
latest WebAIM Million report.[3] Further, automated tests leave
out anywhere between 57 to 80 percent of other accessibility
considerations,[4] meaning the state of content on the web for people
with disabilities is likely worse than measured.

Even with this terribly small share of accessible home pages,

the state of data visualizations is even worse—virtually all are
inaccessible in some way or another. In 2021, I created Chartability,

10 D O N O H A R M G U I D E
a set of heuristics pulled together from designers, functionality, and fail to contextualize and provide
developers, researchers, and practitioners to evaluate appropriate interpretations of information.
data visualizations for visual, motor, vestibular,
Data visualization practitioners continue to rely
neurological, and cognitive accessibility.[5] In all of my
on machine learning models that magnify existing
professional audits using Chartability—over 80,000
inequalities. As an example, practitioners have
tests performed to date—not a single data visualization
tried build machine learning models that attempt to
scored 100 percent for accessibility, and most
automatically interpret chart descriptions and insights
consistently scored worse than every equivalent test
without any guidance from the author.
performed by the WebAIM Million report.
Writing alternative (alt) text to describe visual content
As the data visualization field continues to expand and
on the web takes some serious consideration (see
grow, accessibility considerations need to be central
Chapters 4, 5, and 6). In a 2020 blog post, disability
to content creators’ analyses and communications.
and accessibility expert Sheri Byrne-Haber argued that
If creators continue to use the same methods and
no single answer exists to the question of “what is
tools without interrogation, the current state of
the right alt-text for an image?”[7] “Context is the most
inaccessibility will only worsen. To make the future
critical aspect of alt text everyone seems to miss,”
more accessible, creators first need to recognize what
she writes. As an example, she shows eight different
tools and solutions aren’t a good fit, become more
possible descriptions of an image of a Jack Russell
knowledgeable about accessibility, explore how we
Terrier wearing sunglasses. All of the descriptions
can improve the tools we have, and build new tools
could be valid depending on the author’s intent and
entirely.
the context that surrounds the image. Here I provide
my own version of this test. Do you think a machine
Not Every Technical Solution Is a Good
learning algorithm could know which of the following
Fit for Accessibility
descriptions of this line chart is the right fit?
How can we intervene on human-built problems of
accessibility in data visualizations and the usability of 1. “Line chart.” If this image appeared in the
the web more generally? Business-minded approaches chart-picker interface of a tool like Excel or
Tableau, the chart type is the only piece of
seek to reduce up-front cost by leaning on quick-
information that matters.
fix solutions like web accessibility overlays, which
consist of third-party code, programs, or tools that are 2. “A line chart with five lines, titled Product
layered on top of existing websites to make them more Performance in 2021.” If the image appeared
accessible.[6] Researcher-minded approaches strongly instead in a mockup made by a designer whose
incentivize “solving” inaccessibility by using artificial work is in progress, only the chart type and title
intelligence or machine learning methods on things would matter, because the data are made up and
that have already been built. the design is likely to change.

Both approaches try to fix accessibility problems 3. “Line chart. Product Performance in 2021.
using the same tools and systems that created Product A is outperforming all other products.”
those problems. Although this goal is noble, the In a presentation to a decisionmaker who wants
results are not good. Overlays and machine-learning to know which product is doing the best, both the
solutions suffer from many of the same fundamental data and design matter.
issues. They force people with disabilities to rely
on machine-generated accessibility, provide a poor
overall experience compared with human-authored

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 11
 4. “Line chart. Product Performance in 2021. The graph is simply decorative and not intended
All products trended down sharply from to convey content. It might be a background
January until June and slowly stabilized back into image or meaningless filler. (It’s worth noting
positive territory by November.” In a report to that in practice, you can’t just leave an alt text
analysts who want to know about larger box empty. The image must be purposely set as
trends, the takeaways from the data are decorative or “NULL”; see Chapter 5 for
what matter most. more details.)

5. “A minimalist, greyscale line chart with five Just like Byrne-Haber’s example, any of these (or
lines titled Product Performance in 2021 using a none of these) descriptions could be appropriate
full-width, bold-weight, sans serif typeface. depending on the context. Will a machine learning
Product A’s line is emphasized with a near-black algorithm know what other text, subtext, functionality,
charcoal color, thickened stroke, and direct label and content surrounds the chart or what the chart is
at its end. All other lines in the chart are shown intended to be used for? Only a human author really
with reduced importance and are thinner, understands why they’ve made something and what
unlabeled, and colored with a softened grey. they believe their audience should know. But as Louise
There are no data labels, grid lines, or y-axis on Hickman and Alexa Hagerty argue in a 2021 blog post,
the chart, but an x-axis shows abbreviated solutions that fit people’s needs are often in tension
months of the year from January to December in with solutions that scale, such as machine learning or
a small, light, sans serif typeface.” In a design artificial intelligence.[8] Algorithmic solutions tend to
portfolio or article that explains minimalist chart avoid nuance and focus on a one-size-fits-all design,
designs, the design details are what matters. which can create problems for people with disabilities.

6. “(The alt text is set to NULL, and the image This nuance is why it’s imperative that the people
is marked as decorative/presentation-only).” who create charts and graphs (with the assumption

12 D O N O H A R M G U I D E
that they have some understanding and intent for that coworkers, codesigners, leaders, and experts who help
visualization’s use) also understand how to make their build things with us. But this guidance must always
work accessible for people with disabilities. include a caveat: be wary of asking for free labor as
you embark on a path toward learning. Do everything
Gaining Practical Knowledge about Accessibility you can to find what has already been documented in
Is the Prerequisite to Using Tools Effectively standards, blogs, research, and articles, and
“The classroom remains the most radical space of compensate experts for their expertise when you
possibility in the academy,” wrote author and activist work together.
bell hooks.[9] She argues that teaching people how to
think about the problems in our world can cultivate
the most radical opportunities to enact change.

If we educate designers, developers, researchers,

and authors about the importance of accessibility
and how to implement accessibility into their work,
perhaps they will be the ones to make their work
more accessible and imagine new futures. Before we
imagine what the right tools are for the job, we need
to have the collective knowledge of what accessible
experiences should be. Many tools are capable of Improving practical knowledge also entails teaching
being accessible, but practitioners need to think about accessibility as a foundational skill. Although people
accessibility and their design goals before they can use new to accessibility work often find it difficult, this
those tools effectively. barrier largely arises from missing skills. Self-teaching
accessibility frequently leads to a mismatch of skills:
Providing a floor of practical knowledge was my
practitioners are highly advanced in one area of
goal for Chartability. In my collaboration with
design or development by the time they recognize the
Dominik Moritz and Cynthia Bennet, we explained
significant gaps in their understanding. I’ve seen this
that Chartability would take existing accessibility
gap time and time again with web engineers who don’t
knowledge and synthesize it for the difficult domain
know how to properly use programming languages like
of data visualization.[10] I operated on the assumption
HTML and CSS. Unfortunately, these engineers get
that we need a level of self-sufficiency and capability
so deep into bad practices that the basic skills
to recognize quality or challenges as we do our
necessary for accessibility become significantly
work. Chartability exists as a design resource for
expensive to relearn.
practitioners to evaluate their own visualizations. As
a field, we need more resources like it. People need Knowledge alone can’t fix everything. We need to be
patterns, guides, and reusable materials. able to use what we know. If our tools and materials
aren’t designed to make accessibility work easy, we will
But a tool like Chartability doesn’t set a ceiling or push
continue to take the path of least resistance.
the boundaries of what we already know. It serves as a
record of the bare minimum of what we should be
Builders Need Improved Tools
doing. Working alongside people with disabilities is the
I’m a maker for makers: I build tools that others use
single most important thing we can do to go beyond
to create. And I firmly believe that improving the
the minimum and work toward accessibility. People
tools we have or simply selecting the best tools
with disabilities are the actual experts who can tell us
out there are two of the easiest ways we can stop
what is or is not accessible to them. We need them as

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 13
Installation view: Tales of Our Time, November 4, 2016-March 10, 2017, Solomon R. Guggenheim Museum, New York. Photograph
by David Heald © Solomon R. Guggenheim Foundation, New York.

building inaccessible data visualizations. Think of this Significant time is spent considering the first two
process as slowing down or tightening the flow on a when selecting the right tools for the job. But have
firehose. Right now, the overlays and machine learning we paid the same attention to accessibility? To assess
algorithms that eternally try to clean up the mess that question, I provide my opinions on various
we create are like Sun Yuan and Peng Yu’s haunting art visualization tools’ accessibility abilities based on my
installation of a robot forever mopping its own fluid.[11] experience auditing and working with these tools.
We are making messes with our tools faster than we (Keep in mind this assessment is not in any way legal
can clean things up. or compliance advice.)

In my previous work for Visa Chart Components—a Currently, most of our visualization tools aren’t
design system toolkit for Visa,—we wanted to accessible out of the box, and nearly half don’t have
empower creators at Visa to easily make accessible strong potential, either. Most accessibility design and
charts and graphs.[12] We wanted to be opinionated development relies on the visual’s creator to know
about our design, which is the mission of any good about and find a way to implement it. For example,
design system (Chapter 8). someone has to know that alt text is important and
figure out how to add it to a chart or graph. But some
This work revealed to me that there are four high-level
tools help designers and developers do the right
variables worth comparing when selecting visualization
thing while using the tool. In the same way that Excel
tools for the job:
automatically sets defaults for spacing and color
1. Ease of making a visualization from data schemes, some tools have defaults and out-of-the box
2. Expressiveness of the visuals functionality for accessibility. Visa Chart Components,
for example, provides a warning and instructions
3. Out-of-the-box (ready-to-go) accessibility
to developers when they’ve forgotten to provide
4. Robust/flexible potential of the accessibility expected inputs.

14 D O N O H A R M G U I D E
Long description
There are four groupings in this chart.
1. Pushing the ceiling of accessibility:
Visa Chart Components, Highcharts, SAS.
These tools are in the middle of the upper-right quadrant of the chart, indicating high “Built-in Accessibility” and “Robust
Accessibility Potential.” Highcharts and SAS have more potential than Visa Chart Components, but Visa Chart Components
offers a little bit more out of the box.
2. Some great stuff but not comprehensive:
Datawrapper, PowerBI.
These tools are both a little below the x axis, straddling the y axis. Datawrapper is a bit more toward “Little Accessibility
Potential,” and PowerBI is closer to “Robust Accessibility Potential.”
3. A mix of good and not good but needs a lot of work
Tableau, Excel, Microstrategy, Chart.js, Plot, Altair/Vega-Lite.
All of these charts are most of the way down the x axis, with low built-in accessibility. Tableau and Microstrategy both have
lower accessibility potential; Excel, Chart.js, Plot, and Altair/Vega-Lite have a growing magnitude of potential.
4. Good luck
Figma/Sketch/Illustrator, Google Charts, ggplot2, ParaView, MATLAB, Matplotlib, P5.js, visx, D3.js, and Vanilla JS.
The majority of these have no built-in accessibility at all. Google Charts, P5.js, visx, D3.js and Vanilla JS all have an increasing
magnitude of accessibility potential; all others have little.
Tableau, Excel, Microstrategy, Chart.js, Plot, Altair/Vega-Lite.
All of these charts are most of the way down the x axis, with low built-in accessibility. Tableau and Microstrategy both have
lower accessibility potential; Excel, Chart.js, Plot, and Altair/Vega-Lite have a growing magnitude of potential.
4. Good luck
Figma/Sketch/Illustrator, Google Charts, ggplot2, ParaView, MATLAB, Matplotlib, P5.js, visx, D3.js, and Vanilla JS.
The majority of these have no built-in accessibility at all. Google Charts, P5.js, visx, D3.js and Vanilla JS all have an increasing
magnitude of accessibility potential; all others have little.
At a high level, the accessibility capabilities of a tool Tools can also offer the following functionality
can be improved by ensuring the following: out of the box:
• The important details within the visualization can • Automatic contrast adjustment
be accessed by screen readers, keyboards, and • Redundant encodings
other assistive technologies. Most static images,
like JPG or PNG files, can only be described by • Text spacing
alt text, meaning more complex features are • Interactive highlighting and dimming
often lost.
• Tooltips
• Users can download the data underlying the
• Semantic structure
chart to their own computer in an accessible
format (such as a CSV file). • Safe color palettes
• The data in the chart can be represented with • Accessible examples in core documentation
sonification (as tones that can be heard) and in a
Easy-to-follow core documentation of accessible
tactile format (that can be touched and felt).
practice is vital as a first step. Highcharts, a JavaScript
• Creators can annotate the visualization and guide visualization library, provides a stellar example of
readers through it. how tools can provide such documentation.[13] Often
when it comes to tools that make charts and graphs

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 15
using code, practitioners learn how to use the tools went to great lengths to add keyboard interactivity
from their documentation. And the more that these within charts, which is currently not something that
core documentations can integrate accessibility Tableau offers.[16] DeMartini used the hackability
considerations into every step of the tool’s use, of Tableau for accessibility rather than just for
the more that community members will follow suit extraordinary visual effects. These members of their
and do the right thing. Datawrapper, another data respective communities are showing what their tools
visualization tool, has guidance built in and are capable of, pushing limits, and inspiring others. It
includes considerations for alt text and color vision is important that we look for and encourage this work
deficiency.[14] The tools themselves are the first when we encounter it.
place where correct, accessible best practices
But tools shouldn’t rely on hacks to make accessible
should be communicated.
data visualizations, they should create accessible
However, when core documentation is absent, products by default. Practitioners can pressure
practitioners often learn how to use a tool from toolmakers to make changes to their tools. Pressure
community-contributed examples. Very few, if any, works. Advocates in every major visualization
community examples on blogs or websites include community already do this work: the teams developing
considerations for accessibility. This absence leads us data visualization tools and platforms like PowerBI,
to a larger problem: when someone makes something Datawrapper, the Jupyter Project, Vega-Lite, Tableau,
with an envious functionality, other practitioners and Observable’s Plot have all made strides for
copy it directly or otherwise emulate it. If the first accessibility following their initial releases because of
product is inaccessible, that inaccessibility ends up internal and volunteer efforts. PowerBI and Jupyter, in
being reproduced every time it is copied. The Tableau particular, have invested significant effort in the past
community is especially bad at this: expert users often few years. PowerBI has worked to ensure that tool
“hack” Tableau to build extraordinary application- itself, not just the output from the tool, is accessible.
like interactivity or produce advanced visualization The community of practitioners around Project Jupyter
types, but these examples almost always generate have organized an accessibility working group to
nightmarish tangles of inaccessibility. Similarly, it is improve their tools, including Jupyter Notebook, which
difficult to intervene when inaccessible visualization is one of the most common collaborative data science
recipes are shared by creators on Observable, notebooks used today.[17]
company websites, or social media. If we don’t have
They’ve built a coalition of funded and volunteer work
a community that can recognize inaccessibility
to shape the future of accessible data science but still
and catch these bad examples, we will continue to
have a long road in front of them.
reinforce bad practices.
Many of our tools are salvageable as long as we get
Another way to counter the lack of documentation,
involved. If more practitioners demand better, more
beyond catching bad practices and building good
accessible tools, companies might begin making
examples, is to highlight builders and makers doing
accessibility a priority.
the best with the tools they have. The data team
for the City of San Francisco is a good example. Not It Isn’t Too Late for Visualization
only did they carefully document how to make public
Data visualization is in a hopeful place as a field: we’ve
dashboards of COVID-19 case data accessible to
experienced explosive growth in tooling and practice
the public using PowerBI, they also created a set of
in the past two decades, and nothing is so entrenched
guidelines for others embarking on similar
that it cannot change. Two hundred years ago, we
work.[15] Chris DeMartini has documented his
had tactile maps and graphs made for people who are
accessibility journey with Tableau, including how he
blind or have low vision. Nothing is stopping us today

16 D O N O H A R M G U I D E
Considering Disability In Design Affects Every Area of Visualization

from also making information experiences broadly We can’t rely on overlays and machine learning models
accessible in old and new ways. to solve access problems for us. We are the ones
designing and building data visualizations, so the onus
Our mission as a community is to surface insights out
falls to us. Although I wish my takeaway could be as
of data. Our field can grow beyond centering visuals
simple as telling you to begin learning accessibility
and remain true to this practice. In the Nightingale
and working to improve your tools (which of course
data visualization blog, Doug Schepers writes that
you must do), I also want to stress that we have
“accessibility is at the heart of data visualization.”[17]
structural and cultural priorities to change as well.
Making complex information understandable doesn’t
Our employers need to make accessible workplaces
have to be limited to just visual representations. I want
for our coworkers with disabilities. Our budgets need
to inspire everyone reading this essay to imagine more
to include accessibility as a top priority—and we
expansive data experiences, interactive stories told in
need to compensate disabled people for their advice
written form that can involve sound and touch as well.
and expertise in making our products better. Our
Disabilities can have many dimensions that affect immediate roadmaps need to include accessibility
every part of data representation in design. In my talks, as part of our core products. Our educational
I use the figure above to demonstrate how considering programs need to teach about access and disability as
the distributions of disability among people living in foundational topics. Every data visualization contest
the US could affect every area of our practice. or celebration needs to include accessibility as a
Everything on the right side of the figure we already measurement of excellence.
do. Considering people with disabilities encourages us
Until we see changes like these, however, individuals
to become better at each of these things.
must do what we can, and it won’t be easy. So get
Data visualization is at a watershed moment. We learning and building, and remember: pressure works.
have an opportunity to grow and mature in ways that Let’s take our relationship with our tools to the next
could inspire many other fields. We have a beautiful level and never compromise on accessibility.
community of researchers, designers, engineers,
scientists, analysts, reporters, and storytellers.
Accessibility is an opportunity for all of us to hone our
craft and become excellent at what we do.

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 17
Chapter Two Notes
1
“Total Number of Websites,” InternetLiveStats, accessed October 14, 2022, https://www.internetlivestats.com/total-number-of-websites/.
2
Kelly Mack, Emma McDonnell, Dhruv Jain, Lucy Lu Wang, Jon E. Froelich, and Leah Findlater, “What Do We Mean by ‘Accessibility
Research’?” In Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems, paper 371 (New York: Association for
Computing Machinery, 2021), https://doi.org/10.1145/3411764.3445412.
3
“The WebAIM Million,” WebAIM, last updated March 31, 2022, https://webaim.org/projects/million
4
“The Automated Accessibility Coverage Report,” Deque, accessed October 14, 2022, https://www.deque.com/automated-accessibility-
testing-coverage/.
5
Frank Elavsky, Cynthia Bennett, and Dominik Moritz, “How Accessible Is My Visualization? Evaluating Visualization Accessibility with
Chartability,” Computer Graphics Forum 41, no. 3 (2022): 57–70.
6
See Overlay Fact Sheet at https://overlayfactsheet.com/.
7
Sheri Byrne-Haber, “Context Is the Most Critical Aspect of Alt-Text Everyone Seems to Miss,” UX Collective (Medium blog), October 10,
2020, https://uxdesign.cc/context-is-the-most-critical-aspect-of-alt-text-everyone-seems-to-miss-e18803a79212.
8
Louise Hickman and Alexa Hagerty, “Standardised Access: The Tension between Scale and Fit,” Ada Lovelace Institute blog, May 24, 2021,
https://www.adalovelaceinstitute.org/blog/standardised-access-tension-scale-fit/.
9
bell hooks, Teaching to Transgress Education as the Practice of Freedom (London: Routledge, 2021).
Frank Elavsky, Cynthia Bennett, and Dominik Moritz, “How Accessible Is My Visualization? Evaluating Visualization Accessibility with
10

Chartability,” Computer Graphics Forum 41, no. 3 (2022): 57–70.

11
See Sun Yuan and Peng Yu’s 2016 art installation, “Can’t Help Myself,” at the Solomon R. Guggenheim Museum in New York, https://www.
guggenheim.org/teaching-materials/teaching-modern-and-contemporary-asian-art/sun-yuan-%E5%AD%99-%E5%8E%9F-and-peng-yu-
%E5%BD%AD-%E7%A6%B9.
12
“Visa Chart Components,” Visa Developer Center, accessed October 19, 2022, https://developer.visa.com/pages/chart-components.
13
“Highcharts for Accessibility,” Highcharts, accessed October 19, 2022, https://www.highcharts.com/blog/accessibility/.
14
See Datawrapper’s website at https://www.datawrapper.de/.
15
Lauren Jong, Emily Vontsolos, and Blake Valenta, “A Template for Accessible Data Visualizations.” Medium, San Francisco Digital Services,
13 May 2022, https://medium.com/san-francisco-digital-services/a-template-for-accessible-data-visualizations-ca2ed52f945b.
16
Chris DeMartini, “A Tableau Accessibility Journey - Part IV - Keyboard Accessibility.” DataBlick blog, August 13, 2021, https://www.
datablick.com/blog/2021/8/10/a-tableau-accessibility-journey-part-iv-keyboard-accessibility.
17
Jupyter Team, “Jupyter Accessibility,” Jupyter Accessibility Working Group, accessed October 19, 2022, https://jupyter-accessibility.
readthedocs.io/en/restructure/README.html.
18
Doug Schepers, “Why Accessibility Is at the Heart of Data Visualization.” Nightingale Journal of the Data Visualization Society, May 21,
2020, https://medium.com/nightingale/accessibility-is-at-the-heart-of-data-visualization-64a38d6c505b.

18 D O N O H A R M G U I D E
 Today, we are inundated with so much
CHAPTER THREE
information—good and bad, true and false,
Designing and everything in between—through the web,
Data for social media, television, radio, and print. Data
visualizations, such as charts, diagrams, and
Cognitive Load infographics, can offer an oasis of simplicity,
distilling information to shapes, colors,
patterns, and words. That is data visualization
DOUG SCHEPERS at its best.
But at its worst, data visualization confuses, decontextualizes,
obfuscates, deceives, or overwhelms. Worse yet, it often blocks
access to the information entirely, such as a chart lacking
equivalent accessibility for readers with disabilities, including
blindness, low vision, or cognitive disabilities.[1]

We owe it to ourselves and to our readers to present information

in the clearest way possible. As with the plain language
movement, there are human rights and social justice aspects of
clear, accessible data representations. Decreasing the cognitive
processing that it takes to understand a data visualization can not
only make our work better but also lead to more inclusive, ethical
data visualization for people with disabilities.[2]

Improving charts for people with disabilities normally improves

their usability for everyone. Cognitive Load Theory (or CLT) is
one tool that helps us consider mental processing when creating
material. In this chapter, we’ll apply CLT to charts by looking at its
different aspects through the lens of specific disabilities; we’ll also
look at CLT in chart animation.[3]

Cognitive Load Theory

CLT is a teaching methodology that originated in the 1980s to
examine how students learn. Researchers approached learning
from a neurological perspective, considering how the brain’s
constraints could reduce effective learning. In general, CLT does
not focus on data visualization or people with disabilities, but we
can apply many of its concepts.

CLT is based on the Atkinson–Shiffrin model of memory,[4] which

describes three types of memory: sensory registers, working
memory, and long-term memory. Whereas sensory registers are
the external inputs we observe, and long-term memory is the
fragments of those experiences we hold on to, working memory

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 19
is the pathway and the bottleneck between the two.
Tasks like learning new material or interpreting a
chart use up the limited capacity of working
memory. CLT seeks to understand our memory’s
capacity by categorizing a task into its intrinsic and
extraneous load.[5]

Intrinsic load is the inherent nature of the information,

refined to its bare minimum.

Extraneous load is how the information is

structured and presented. A bar chart. Because most of us are so familiar with this data
structure, the information it conveys is very apparent to us.

meaning. Later, you learned about the different axes,

how values were represented as the height of the bars,
and how to compare the bars to understand the
relationships in the data. Each of these elements
occupied space in your working memory. As you
became more familiar with the bar chart, you no longer
needed to expend effort to read it. You had chunked
the different parts of the chart into their individual
roles, and now you automatically read and apply new
bar-chart data to this schema. The concept of the bar
chart no longer occupies your working memory, and
How intrinsic and extraneous loads fit the capacity of our
you can concentrate just on the novel data.
working memory.
Now that we understand CLT, we can begin to
Both carry related elements that our working memory
explore its many principles and applications. I
must process and our long-term memory seeks to
find the following are particularly relevant to
store away. As content creators, our goal is to optimize
data visualizations:[7]
intrinsic load and reduce extraneous load so the
product fits the capacity of our working memory. This • Multimedia principle: Use words and pictures
process aligns with Edward Tufte’s popular (though because both are more effective than words
often criticized) contemporary advice in the data alone. A reader is more likely to remember and
visualization world to increase the data-to-ink ratio recognize data if they are presented as a bar chart
and reduce chart junk. rather than as a dense table.[8]

Information flows both ways between short-term • Contiguity principle: Present words and pictures
memory and long-term memory. Concepts familiar to simultaneously rather than successively. We
the reader (that is, already present in their long-term describe this strategy below in our discussion of
memory) can decrease this load, as new information is direct labeling.
bundled into existing mental models in a process called • Coherence principle: Exclude extraneous
chunking and automating.[6] words, sounds, or pictures. Adding elements to
Picture a bar chart, like this one showing the share of a chart, including unnecessary labels or visual
American adults with a functional disability. At some distractors, reduces the speed with which
point in your life, you didn’t know how to read a bar a reader comprehends and retains the core
chart, or even know that its different parts had information presented.

20 D O N O H A R M G U I D E
 • Interactivity principle: Allow learners to control CLT and Disabilities
the presentation rate. This principle is especially Cognitive load affects everyone, but the challenge
relevant in the discussion of animation, which can be amplified for people with disabilities. A small
we turn to later. distraction can derail a person with Attention Deficit
• Signaling principle: Emphasize key steps in the Hyperactivity Disorder (ADHD) or a disability affecting
representation. We describe this concept below in memory. Too much unstructured textual detail can
our discussion on highlighting and annotation. bewilder a reader who is blind or has low vision.
Separating related visual elements, like a line and its
Simplifying Is Too Simplified label, can disorient a person with low vision. Dense
It’s natural to conclude that optimizing intrinsic load information or large blocks of text can be difficult
and reducing extraneous load is just a fancy way of to comprehend and absorb because of fatigue, a
saying we should simplify our charts, diagrams, and complication of many neurological conditions such as
maps. That’s good advice, but it doesn’t always work traumatic brain injuries and Multiple Sclerosis.
out that way. We need to consider our context, our Understanding how CLT can affect people with
audience, and their attention and engagement. different disabilities allows us to make more accessible,
Simplifying works well for a reader who is unfamiliar inclusive, and generally usable data visualizations.
with the topic of a chart or who is under stress (such Although concepts can apply differently depending on
as someone taking a timed test). You can reduce a user’s specific disability, our goal is to provide a brief
the amount of information or break it down into tour of some of the more readily apparent instances.
manageable steps with additional context (extraneous As we examine different principles of CLT through the
load). You can also use common chart types your lens of specific disabilities, we need to be mindful that
audience is familiar with. each principle may have broader relevance to other
But for a reader who has already developed a mental conditions. A person may have multiple impairments,
model of our topic with time for exploration, we and disabilities are often intersectional with other
should make our chart dense with salient information. social factors, such as low income or educational
A more information-dense chart might use familiar disparities, which can increase overall cognitive load.
symbols as shorthand, include more data, or use novel Merely addressing one type of disability may not
chart types that highlight relationships an expert user produce an equivalent and equitable experience
can spot. for all users.

Both novices or experts have an upper limit to Low Vision

effective information density. Yoghourdjian and People with low vision can experience loss of central
colleagues explored brain activity among 22 study vision, decreased peripheral vision, reduced contrast
participants as they viewed complex node-edge graphs sensitivity, or decreased ability to see small details,
(i.e., network diagrams) and found that cognitive load all of which can make reading text or finding patterns
is readily apparent in their subjects when they’re in numeric tables much harder than recognizing
asked to complete basic comprehension tasks.[9] The patterns in shapes, lines, or blocks of color. Compare
more complex the chart, the more mental effort was the amount of information available in a blurry
recorded, up to a threshold where the mental strain spreadsheet with a blurry line chart in the two images
reduced because the reader gave up and disengaged on the next page. Ascertaining the basics of the
from the task. Yoghourdjian’s study demonstrates that patterns is much easier for the line chart than for
when creating our charts, we need to keep in mind the the table, which requires detailed examination of the
audience’s capacity to engage with the material. numbers in the cells.

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 21
 find its label (or zoom in on the label and pan back
along the line). Direct labeling also enables magnifier
users to know the final relative values of each line
while reading the labels, which helps them construct
a mental model of the data. (For an example of direct
labeling, see the section below on divided-attention
tasks.)

Tactile Graphics
Tactile graphics use touch to convey
information. You may have experienced
these as 3D exhibits in a museum or as a
touch-screen device that vibrates when
you move a finger over a particular spot.
They’re commonly used in education and
science for people with visual disabilities and
have proven very effective.[10] A variety of
techniques are available for making tactile
graphics. Static physical graphics can be
created as shapes with a 3D printer or as
Because these images are blurred, we can much more easily raised symbols on paper with a specialized
see the overall trends and relationships in the line chart than in embossing printer or special capsule paper
the table.
that swells when heated. Digital tactile
For people with low vision, charts often convey images can be created to use the vibration
information with less effort than tables or text, which motors in mobile devices, or content can
decreases cognitive load. Reducing these elements be designed to work with assistive
from several individual numbers in a column to a single technology like refreshable pin displays
line enables a person who uses a screen magnifier to or braille displays.[11]
track value changes while zoomed in or to see the
whole trend while zoomed out. This data presentation Low Contrast Vision
significantly benefits readers with low vision. Tactile A common low-vision characteristic is decreased
graphics can benefit blind readers and readers with contrast sensitivity. Colors may appear muted, and the
low vision because visually impaired people can borders between different blocks of color may appear
process many types of graphics much better by ambiguous. An easy way to help people differentiate
touching a texture than by listening to a series between items while reducing cognitive load is to
of numbers. use separation. We can do this by breaking tasks into
bite-sized chunks conceptually and visually with a thin
Another technique that aids users with low vision
border between the slices in a stacked bar chart (see
is directly labeling each line in a chart rather than
pair of charts on the next page). This approach works
using a separate legend. With a legend, readers have
best for discrete data rather than continuous data, but
to locate it, zoom in, memorize the symbols and
with a little creativity, the principle can be applied to
labels, zoom out to find those symbols, then identify
both.
and recall them. With direct labels, they can zoom in
directly on the line of interest and pan to the end to

22 D O N O H A R M G U I D E
The chart on the right is much easier to process visually because of the thin breaks in the bars. Our brains need to work a bit harder
to find the breaks in the left chart.

Blindness Dyslexia is a reading disorder that often includes

When visually impaired readers hear a data table difficulties with visually processing symbols and
through a screen reader, each number in the row or sometimes with reading or interpreting charts or
column is read to them sequentially. The reader not diagrams. For people with dyslexia, flow charts are
only has to remember the previous number, they must often ideal for explaining procedures, and icons or
also use their working memory to perform calculations pictograms can help more than words alone.
on the magnitude and direction of change, repeating
Dyscalculia is a disability relating to numbers and
the process for each new number.
mathematics. It may include difficulty with symbols,
A chart can also expose raw numbers in a structured quantities, mathematical reasoning, memory tasks, or
way (e.g., with ARIA markup to make it accessible to a sometimes visual-spatial interpretation. For people
screen reader; see Chapter 5 on ARIA labels), but this with dyscalculia who don’t have problems with visual-
has the same problem as a data table: it’s a flood of spatial interpretation, charts can be very helpful in
numbers. To address this problem, you should provide processing mathematical or numeric concepts and
meaningful alternative (alt) text that describes the content, whereas data tables might prove more
most salient information, preferably with a detailed challenging. Many people with dyscalculia can struggle
summary as the extended description. The raw with graphical timelines, so time-series data may be
numbers are still important, because a blind reader more challenging than other types of data.
may want to delve into details and examine specific In general, if your chart is explanatory rather than
values, but you should let people decide whether they exploratory, you should consider writing a summary
want to spend the time walking through the data after that reinforces its conclusion, with explicit projections
first hearing the summary. Respect your reader’s time or recommended courses of action based on the
and attention. data. Symbols in line charts, scatterplots, and maps
Dyslexia and Dyscalculia should be unique and not rely on orientation alone
People with dyslexia and dyscalculia can often to distinguish between them. Where possible, avoid
understand data visualizations more easily than close-packed graphical elements—space them out to
numeric data, such as tables or lists of numbers. But make them distinct and reduce visual confusion. Grid
with both conditions, text labels may not be as useful lines and guiding lines are helpful, especially if they are
as for most people, and problems with directionality interactive, but don’t let them visually overwhelm the
and orientation may arise. core data representation.

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 23
On the left, a line chart with labels in a legend/key. On the right, a line chart with direct labeling near the lines.

Attention Management Disabilities one has a legend, separated from the content; the
ADHD, or Attention Deficit Hyperactivity Disorder, other has labels directly on the chart next to the ends
is misleadingly named. Someone with ADHD does of the lines. Splitting the reader’s attention between
not have a decrease in attention itself (because they the data representation and the legend means extra
commonly exhibit hyperfocus); rather, they have a mental processing. They need to commit each symbol
decreased ability to direct their attention to the and color to their working memory, then shift their
most important task at hand. view over to the line to interpret the data while also
applying the memorized legend. This effort may seem
People with ADHD are not the only readers affected
trivial, but it imposes an unnecessary memory tax
by attention management disabilities—typical aging
that has been demonstrated to decrease the speed
introduces several deficits in memory management as
and accuracy of comprehension and retention of
well.[12] People with attention management disabilities
information.[13]
constitute a large demographic audience.
The direct labeling is also significantly easier for
As you work with data and charts, consider your
readers with low vision to process, and it benefits
reader’s capacity for selective and sustained attention,
people with color vision deficiency (CVD, or “color
and decrease tasks that require divided attention.
blindness”), who can use label proximity rather than
These changes might include reducing the amount of
color to identify and distinguish the lines.
detailed information in a chart or diagram, reducing
the number of annotations and labels, and lowering Selective Attention
the complexity of the visualization itself. To better Selective attention is the reader’s ability to focus on
understand how we can tailor our visualizations for stimuli that are relevant to the task at hand while
readers affected by attention management disabilities, disregarding irrelevant stimuli. You can improve
we need to understand the different types of attention selective attention with a few simple techniques, all
that visualizations require. of which are demonstrated in the pair of images on
the next page:
Divided Attention
Divided-attention tasks require the reader to process 1. Decrease, remove, or deemphasize unneeded
more than one source of information or to perform visual elements using lower contrast, muted
more than one task at the same time. Notice the colors, or thinner line width.
difference in the two graphs at the top of this page—

24 D O N O H A R M G U I D E
On the left, a scatterplot with bold black grid lines and several symbols of the same shape with only color differences. On the right,
an improved scatterplot with thin gray gridlines and several symbols of different shapes and colors.

2. Make relevant data marks of different require all the data to be in a single chart or if the chart
categories more easily distinguishable. could be split into multiple charts, each focusing on
a specific task. If the set of tasks cannot be broken
3. Move labels from a dedicated legend to direct
up efficiently, you may also consider adding a layer
labels on data points or clusters of points.
of interactivity to help the reader concentrate on
As with direct labeling, using data symbols with a subset of the tasks or offer staged states with
different shapes and different colors benefits people feedback on progress.
with CVD as well.
Meaningful animation may also help the reader sustain
In addition to reducing extraneous load, you can attention during prolonged or tedious tasks, such
optimize intrinsic load by directing the reader’s as monitoring a chart for status changes. Animation
attention to the most salient parts of the data, is especially effective when it draws attention to
especially to reflect the intent of an explanatory chart. significant changes, dramatic shifts, or triggered
You can do this with text descriptions (like alt text) or thresholds.
with highlighting and annotation, which is also
particularly useful for people with low vision. This How Animation Can Decrease
selective emphasis draws on the signaling principle (or Increase) Cognitive Load
of CLT. Meaningful animation—through the use of videos,
Sustained Attention animated GIFs, or other means—can be a powerful aid
Sustained attention is the reader’s ability to focus to cognitive accessibility. Animation is one of the most
their concentration on a task over an extended period. literal representations of change over time and can
Charts that require the reader to perform multiple help engage readers.
steps often necessitate sustained attention. Neurologically, our brains process and interpret
If you’re making such a chart, consider what tasks movement differently, prioritizing it over other visual
you expect the reader to perform and whether they stimuli. Because movement captures the reader’s eye
so effectively, animation can be overused, which is

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 2 5
How information proceeds from the occipital lobe to the dorsal visual stream or ventral visual stream.

why it should be considered carefully and thoughtfully. cases, it can even illustrate the actual pace of change,
The brain has two pathways for processing visual either in real time or scaled.
information: the “what” and the “where” pathways.
The “what” pathway leads to identification and
recognition, and the “where” pathway processes the
object’s spatial location. The “where” pathway is faster
and more immediate, which animation triggers by
grabbing and keeping the reader’s attention. We need
to make sure the content we’re animating is worthy of
this special consideration by the reader.

Effective animation aids focus rather than disrupting it.

Chart animations should be functional and brief.
Animation can also engage the reader’s emotions,
either by creating fun or by imparting causality or
agency to the animated objects.[14] The advantages of An example of how animation can be used to show real
changes in location.
animation come with a caveat, however: it can take
longer to interpret, which can cause the reader to
make mistakes in analysis of the data.[15] State changes. In interactive charts, visual elements
often transition from one state to another, such as
Good use cases for animation in data visualizations can
when the data on a chart are changed, zoomed, or
be grouped into three broad categories.
filtered. Showing this transition as literal movement
Demonstrating progression. In more literal diagrams, helps the reader stay oriented and track trends.
where figures represent real objects like the water Without animation, the data changes can be hard to
cycle, animation can show the changing relative recognize.
locations of those objects over time. In more abstract
line charts, it can reveal the progression of a trend,
which can also create emotional engagement. In some

26 D O N O H A R M G U I D E
Three versions of a scatterplot, where some of the data points move from the start in the first scatterplot to the end in the third
scatterplot, with a transition between the two states in the second scatterplot. The movement path of each point is represented
by an arrow.

Feedback. Sometimes a reader needs to know 1. Deactivate Animations by User Preference

immediately that their actions have had an effect in For readers with some cognitive disabilities, animation
interactive charts. If the computing task takes longer can distract or even be dangerous to them, such as by
than a few milliseconds, such as with an asynchronous triggering seizures.
data fetch or a processor-intensive operation, the user
On the internet, you can detect and honor the reader’s
may try to trigger the action again or think it’s not
animation preferences. Programming languages for
working. Providing an animation can assure the reader
the web like CSS and JavaScript have the concept
their action has registered.
of a “media query,” which allows a website to detect
features of the user’s browser, such as whether the
user is using a touchscreen rather than a mouse, the
written language the user has configured, and settings
related to accessibility. One of these settings is the
“prefers-reduced-motion” media query. If the user
has indicated they prefer reduced motion, you can
eliminate the animation or significantly reduce the
speed or range of motion. For users who have not set
their browser’s animation preferences, you can also
provide a website-specific option for users to turn off
An example of providing feedback to a user.
the animation.
Best Practices for Using Animation 2. Give Control of Animation and Processing Speed
in Visualizations Readers with memory or attention disabilities may
Animation is safest when the user has control over not process information at the same pace as your
it. Data practitioners should respect the user’s animation.[16] The same goes for people who are
preferences for when to play animations, the speed distracted. Consider giving the reader control over the
of animations, and the ability to manually trigger playback speed or the ability to restart the animation.
animations. I’ve highlighted four best practices for Allowing readers to interact directly with the animated
making animations useful (and safe) for all users, element can also be effective.
especially those who may have a condition that limits
their ability to use or perceive visual information.

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 27
3. Reduce the Number of Animated Elements A guiding rule is to be mindful of the different
Having more than a couple of animated elements audiences, expectations, tasks, and provenance
can overload working memory, leaving the reader no for your chart, which can affect how you approach
capacity to process and remember the changes before accessibility.[18] Consider if your chart is for explanation
the animation ends.[17] As a result, you should either or exploration; if it’s static, dynamic, or interactive; and
ensure the animating objects move in a similar pattern if there are alternative ways to offer
to one another or reduce the number of animated equivalent representations.
objects. Applying some of these guidelines will help many
4. Announce or Describe Animations people access and process data visualizations more
for Blind Readers effectively, although it will help some people more
If you do use animations in a meaningful way, be than others. As a data visualization practitioner, you
sure to provide a description or a live sequential text can’t reach perfect accessibility, but you can and
update for blind readers, such as with the “aria-live” should experiment with making your visualizations as
attribute (see Chapter 5 on ARIA labels). This addition useful as possible for as many people as possible. You’ll
is especially important for users receiving feedback be doing good, and doing good is often good enough.
after interacting with a visualization.

Conclusion
As data professionals, we often rely on quantitative
measures of chart effectiveness, through A-B testing,
task assessment, or another means of using data;
we do this because we want to solve problems with
certainty. But the world has never been a hospitable
place for certainty. Embracing the ambiguity of how
people approach our data visualizations will often lead
us to create more expansive, accessible products.

28 D O N O H A R M G U I D E
Chapter Three Notes

W3C Cognitive Accessibility Task Force, World Wide Web Consortium, draft from September 21, 2021, https://w3c.github.io/coga/user-
[1]

research/.
[2]
Ashley M. St. John, Melissa Kibbe, and Amanda R. Tarullo, “A Systematic Assessment of Socioeconomic Status and Executive Functioning in
Early Childhood,” Journal of Experimental Child Psychology 178 (2019): 352–368. https://pubmed.ncbi.nlm.nih.gov/30292568/.
For readability, I’ll use the term “chart” generically to refer to data visualizations, and I’ll explicitly call out advice diagrams, maps,
[3]

infographics, and so on.

Richard C. Atkinson and Richard M. Shiffrin, “Human Memory: A Proposed System and Its Control Processes,” in Psychology of Learning
[4]

and Motivation volume 2, ed. Kenneth Spence and Janet Taylor Spence (New York: Academic Press, 1968), 89–195.
John Sweller, “Cognitive Load during Problem Solving: Effects on Learning,” Cognitive Science 12, no. 2 (1988): 257–285; and John Sweller,
[5]

Jeroen J. G. Van Merrienboer, and Fred G. W. C. Paas, “Cognitive Architecture and Instructional Design,” Educational Psychology Review 10,
no. 3 (1998): 251–96.
[6]
John Sweller, “Cognitive Load Theory, Learning Difficulty, and Instructional Design,” Learning and Instruction 4, no. 4 (1994): 295–312.
Richard E Mayer, “Cognitive Theory and the Design of Multimedia Instruction: An Example of the Two-Way Street between Cognition and
[7]

Instruction,” New Directions for Teaching and Learning 2002, no. 89 (2002): 55–71.
See also Joseph R. Jenkins, Daniel C. Neale, and Stanley L. Reno, “Differential Memory for Picture and Word Stimuli,” Journal of Educational
[8]

Psychology 58, no. 5 (1967): 303–07.

Vahan Yoghourdjian, Yalong Yang, Tim Dwyer, Lee Lawrence, Michael Wybrow, and Kim Marriott. “Scalability of Network Visualisation from
[9]

a Cognitive Load Perspective,” IEEE Transactions on Visualization and Computer Graphics 27, no. 2 (2020): 1677–87.
[10]
Jordan C. Koone, Chad M. Dashnaw, Emily A. Alonzo, Miguel A. Iglesias, Kelly-Shaye Patero, Juan J. Lopez, Ao Yun Zhang, et al., “Data for
all: Tactile Graphics That Light Up with Picture-Perfect Resolution,” Science Advances 8, no. 33 (2022).
[11]
see Fizz Studio’s open-source SparkBraille as an example: https://fizzstudio.github.io/sparkbraille/.
Elizabeth L. Glisky, “Changes in Cognitive Function in Human Aging,” in Brain Aging: Models, Methods, and Mechanisms, ed. David R.
[12]

Riddle (Boca Raton, FL: CRC Press/Taylor & Francis, 2007): 3–20.
K.N. Purnell, R.T. Sollman, and John Sweller, “The Effects of Technical Illustrations on Cognitive Load,” Instructional Science 20, no. 5–6
[13]

(1991): 443–62.
[14]
Brian J. Scholl and Patrice D. Tremoulet, “Perceptual Causality and Animacy,” Trends in Cognitive Sciences 4, no. 8 (2000): 299–309.
George Robertson, Roland Fernandez, Danyel Fisher, Bongshin Lee, and John Stasko. “Effectiveness of Animation in Trend Visualization,”
[15]

IEEE Transactions on Visualization and Computer Graphics 14, no. 6 (2008): 1325–32.
Kevin S McGrew, “CHC Theory and the Human Cognitive Abilities Project: Standing on the Shoulders of the Giants of Psychometric
[16]

Intelligence Research,” Intelligence 37, no. 1 (2009): 1–10.

Steven L. Franconeri, Lace M. Padilla, Priti Shah, Jeffrey M. Zacks, and Jessica Hullman, “The Science of Visual Data Communication: What
[17]

Works.” Psychological Science in the Public Interest 22, no. 3 (2021): 110–61.
See, for example, Jonathan Schwabish, “Better Data Visualizations: A Guide for Scholars, Researchers, and Wonks” (New York: Columbia
[18]

University Press, 2021).

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 29
PART THREE
Alternative (alt) Text
and Screen Readers
 Innovative data visualization methods are
CHAPTER FOUR
increasingly found in many kinds of media,
Writing Alt Text to including news websites, government information
portals, financial statements, and scientific
Communicate the communication, frequently with no description
Meaning in Data for users of screen reading technology.[1]
Visualizations And even when alternative texts (alt text)—text descriptions
that convey the content and meaning to blind and low-vision
readers—are available, they often fail to convey the main
takeaways of the data.[2]

For data visualizations that are produced as graphic files (e.g., JPGs,
ELIZABETH HARE
PDFs, and PNGs), alt text needs to be added. These files cannot
be navigated with screen reading software, and although some
methods of creating data visualizations can produce readable
elements for screen readers (for example, Visa Chart Components,
SAS Graphics Accelerator, and others reviewed by Elavsky and
colleagues),[3] most statistical software does not produce accessible
charts and graphs. That responsibility falls to the author. Elavsky
and colleagues summarize the situation well: “Accessibility is still an
afterthought in data visualization.”[4]

Graphs and charts follow conventions to orient the reader to the

displayed data, including coordinate axes, axis labels, number
labels, legends, and titles. These introduce the variables and their
characteristics, allowing the reader to comprehend the data points,
trends, and differences within the graph.

Several models have been proposed for thinking about getting the
information in graphs and charts into alt text. This article explains
two of those models: Canelón and Hare’s “four-ingredients model”
for writing complete alt texts and the MIT Visualization Group’s
“four-level model” for classifying types of information from
graphs.[5] I describe both models in the following section and
demonstrate how they are related to one another across a pair of
examples—a simple line chart and a less familiar tree map.

The Four-Ingredients Model

In 2021, Silvia Canelón and I coauthored a study in which we
examined the frequency of alt text inclusion and the completeness
of alt texts for data visualizations in an online learning community.[6]

We identified four ingredient questions necessary for

comprehension of a graph. We based this “ingredients model”

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 31
on the verbal descriptions of scientific graphs from facet or subplot (with its variable name). When small
sighted colleagues and our personal experience multiples are arranged in a grid, start at the upper
reading alt texts online. As a result of this work, we left and work across rows as you would when reading
developed four questions for any data practitioner to regular text.
ask when thinking about writing alt text.
2. What Variables Are on the Axes?
1. What Kind of Graph or Chart Is It? When describing the variables in alt text, data analysts
Beginning alt text with a description of the type of need to keep a couple things in mind. It’s always best
chart or plot helps the reader anticipate the presented practice to use the actual variable names that are
information. Authors use common types of data present in the chart. Relying on descriptions of colors
visualizations such as bar charts, scatterplots, line or textures for identification can lead to confusion
plots, and pie charts to show trends like the shape of or distract from the meaning. Research shows some
data, changes over time, a statistical distribution, or a people report that keeping track of colors from one
comparison of two or more groups. Recent innovations part of alt text to another leads to a difficult cognitive
in data visualization have led to more types of charts, load (see Chapter 3 in this volume).[9] Others, however,
and these deviations from more traditional types need would like to form a mental image of the graph as
to be described in detail if they contribute to the it appears and appreciate knowing the colors.[10] No
meaning of the graph.[7] A tree map, for example, is a matter the preferences of the user, including the
square or rectangular graph divided into groups to actual variable name and units will lead to better, more
illustrate hierarchical part-to-whole relationships.[8] The coherent alt text.
tree map below shows the share of people who are
3. What Are the Ranges of the Variables?
unemployed, divided by two gender and six age
As with any chart, the variables present exist over a
groups. Men are shown in the blue rectangles and
limited range. Describing these ranges will provide
women in the yellow. New and specialized charts and
an overview of the measurements displayed and
graphs like tree maps should be described more
context for understanding the relationships between
extensively than simpler ones, and guidelines for the
variables. Including the ranges in the alt text also
description of each type should be developed.
gives an indication of the order of magnitude of the
observations (e.g., whether they are numbers or
percentages).

4. What Does the Appearance Tell You About the

Relationships Between the Variables?
To answer ingredient four, data analysts usually
need to answer two important questions: “Why
am I including this visualization in the media I am
creating?”[11] and “What are these data saying?”

These answers can lead to a description of what the

graph shows about the data, which will vary by chart
In the overall description, alt text should also mention type. In a line graph, for example, the description
whether the figure is just one plot or a set of multiple would include whether the line is straight, curved, or
graphs (also known as trellis plots, facetted plots, or jagged; where maximum and minimum values occur
small multiples). Well-organized alt text for a graph with respect to the x-axis; and the slope. To describe a
with small multiples would describe the common scatterplot, we would indicate whether the distribution
aspects of all the graphs first, then describe each of points seems even over the whole plot, if there are

32 D O N O H A R M G U I D E
clusters, or if the density of points differs in specific dataset.[14] The information at Level 2 that is available
areas of the plot. Plots of statistical distributions can in the graph is a subset of the fourth ingredient from
often be described with reference to the normal curve, the ingredient model.
though that will depend on the anticipated knowledge
Level 3
of the target reader. For graphs that represent
The third level contains “perceptual and cognitive
distributions, we would include the relative size of the
phenomena.” These components of graphs are
tails, how steep the sides of the curve are, and the
identified by inspecting the data and identifying the
symmetry of the distribution.
trends, outliers, or patterns. This level of information
In current practice, many data visualizations on the relies on the cognition of the reader and may be more
internet, in social media, or in the scientific literature complex than information at Levels 1 and 2. These
do not contain all four ingredients and do not elements may not be readily observed by reading
adequately describe what the graph is showing. We raw data points, summary tables, statistics, or other
found that 3 percent of practice data visualizations nonvisual data summaries. The essential meaning of
contained alt text and, of these, only 34 percent the data visualization is found at this cognitive and
included the answer to this fourth ingredient. perceptual level of description. Level 3, like Level 2, is
part of the fourth ingredient of the ingredient model.
Four-Levels Model
Level 4
The MIT Visualization Group, a team of researchers
The fourth and highest level contains information
working to better understand how “computation can
(or opinions) based on contextual or domain-specific
help amplify our cognition and creativity,” recently
knowledge. The examples given rely on knowledge
analyzed feedback on alt text from blind users. Based
from outside the graph and make assumptions about
on reader responses, they categorized meaningful
causation.[15] Level 4 content is not considered part
alt text into four levels. These levels are useful for
of the ingredient model, which prioritizes objective
considering what to include and what to leave out and
reporting of the chart over subjective interpretations
offer guidance on alt text automation and ethics.[12]
of application. This subjective information from
Level 1 outside the graph should not be included in alt text.
The first and lowest level contains sentences that Blind readers want the information and trends but not
describe components “foundational to visualization extra opinion or interpretation.[16] For example, if you
construction—comprising the elemental properties of think you know the reason for the change in slope of a
the ‘language’ of graphics.” These components include graph, don’t include it in the alt text. It should only be
the title, legend, axis names and scales, and chart type included if it is a printed annotation on the graph.
(e.g., scatterplot, line graph, bar chart). At this lowest
level, there is no “synthesizing or interpretation.”[13] Comparing the Two Models
The first three items in the ingredient model described The two models I’ve described do not perfectly align,
above are all parts of Level 1. but both offer useful ways to think about writing alt
text and graph descriptions. On the next page, I’ve
Level 2
mapped the four items (ingredients) from the Canelón
The second level includes statistical facts that are
and Hare model onto the Lundgard and Satyanarayan
available from the dataset (e.g., mean, median, range,
(levels) model. The first three ingredients from Canelón
maximum, minimum) as well as quantitative relations
and Hare map to the first level in the Lundgard and
(greater than, less than, or equal), and individual data
Satyanarayan model, while the fourth ingredient maps
points. Some of this information is available in the
to the second and third levels.
graph, but the rest is obtained from the underlying

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 3 3
To show how the two models can differ, let’s dive into
two examples. First, we have a fairly basic line chart of
the monthly unemployment rate in the US from
January 1950 to June 2022. Most readers should
recognize a line chart, so we can use less alt text to
describe it. The table on the next page shows how
different versions of the alt text correlate to the
various pieces of the two models (in this report, the
graph itself uses all four cells as the alt text).

Length and Completeness of Alt Texts

Ideally, alt text should be just long enough to describe
what the graph is illustrating visually. Although many
guidelines prioritize brevity,[17] most alt texts are
incomplete and leave users with questions.

These brief alt texts provide inadequate insight into

what the data are communicating. Many guidelines
suggest using one or two sentences, but doing this
can lead to alt texts for data visualization containing
only one item from Level 1 (e.g., a title or caption)
The second example also uses unemployment rate with no Level 2 or Level 3 information. Alt texts
data but uses the less familiar tree map format. Here, should be long enough to include essential Level 2
we focus on the share of people who were and Level 3 information.
unemployed in June 2022 grouped into two gender
To keep alt text succinct and comprehensible, avoid
and six age groups. In this case, the first stage of each
including decorations or “chartjunk”[18] such as
model includes a more detailed explanation of the tree
unnecessary gridlines, repetitive display of data, visual
map and how it is organized.
effects like shadows on bar graphs, or shimmering
elements. These details do not add to the meaning of
the data being displayed.

34 D O N O H A R M G U I D E
Four
Ingredients Four Levels
model model Example alt text
Line Chart

1 1 This graph contains a blue line showing monthly unemployment rates in the
US and gray vertical bars showing recessions. The source of the data is the
Bureau of Labor Statistics and the National Bureau of Economic Research.

2 and 3 1 The x-axis shows the month and year from January 1950 to June 2022.
The y-axis shows the unemployment rate with a range of 0 to 16 percent.
The bars extend along the entire vertical area and correspond to the 11
recessions since 1950. The unemployment rose from 4.4 percent in March
2020 to 14.7 percent in April 2020, a 10.3 percentage point change.
The second-highest change was a 1.3 percentage-point change between
September and October 1949.

4 2 and 3 The unemployment rate line typically slopes upward during recessions,
though not always, and it starts to move upward before recessions begin.
The longest gap between recessions was from July 2009 to January 2020, a
total of 120 months.

4 The largest month-over-month increase in the unemployment rate during

this period occurred during the most recent recession in spring 2020,
resulting from the COVID-19 pandemic.

Tree Map

1 1 A tree map, which is a series of squares and rectangles arranged inside a

larger rectangle, describing the share of people unemployed by gender
and age group in June 2022. Men are shown in a set of six blue boxes and
women in six yellow boxes.

2 and 3 2 There are 12 boxes for each combination of gender and age, where gender
is male or female and age is 16 to 19, 20 to 24, 25 to 34, 35 to 44, 45 to 54,
and 55 and older. The percentages range from 6 percent for 16- to 19-year-
old men to 11.5 percent for 25- to 34-year-old men.

4 3 Men account for a larger share of unemployed people than women, but
the difference is barely perceptible. In June 2022, men accounted for 53
percent of all unemployed workers, though women account for a slightly
larger share of the entire population.

4 Although men between the ages of 25 and 34 have the highest

unemployment rate at 11.5 percent, women ages 35 to 44 have the
second-highest unemployment rate at 10 percent, possibly reflecting
differential changes in the labor market as it recovers from the
COVID-19 pandemic.

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 3 5
The context of the graphic will also influence the and interpretation—cannot be provided automatically.
length of the alt text. A busy graph tracking a lot of Because current automatic methods cannot produce
variables will need more alt text than a simple line alt text describing Level 3 information, they cannot
graph of two variables, and a graph in a scientific produce alt text that provides meaningful access to
journal may need a more detailed description than blind readers.
one meant for a general audience. Authors should
For the foreseeable future, automatic alt texts will be
be aware of “the curse of knowledge,” which is the
incomplete. They can be used as a starting point if they
tendency for experts to prioritize elements of graphs
provide useful Level 1 and 2 information, but these
they find important compared with nonexperts’
partial alt texts should be avoided altogether or edited
descriptions.[19] In many contexts, such as education
to add Level 2 and 3 information. Alt texts that provide
and science publications, a reader needs to have
only the scaffolding without information about the
complete information in order to independently
building are frustrating and unhelpful. These partial alt
prioritize the displayed information.
text snippets are not “better than nothing” because the
reader has invested time to build a mental model to
Automatic Alt Text
understand the graph but never receives the
With the rise of machine learning and artificial
critical information.
intelligence methods, automatic tools to produce alt
text have also proliferated, but these methods always Recommendations
produce inadequate alt text. Whether these alt texts
In addition to writing clear, informative alt text,
are generated by mining statistical code, by scanning a
authors can improve accessibility in many ways,
graphics file, or through artificial intelligence methods,
including providing supplementary materials, such
information at Level 3 and the fourth ingredient will
as the data behind a visualization, separate from the
not be included. Without this information, the reader
actual report or website. A new package for the R
has to invest time building a mental framework for
programming language,[21] ggdatasaver, facilitates
understanding the graph, possibly with elements
saving the dataset associated with data visualizations
from a title or variable names, but the alt text doesn’t
created with the ggplot package.[22] Providing the raw
provide the graph’s takeaway message. When the
data and tabulated summaries allows screen reader
reader starts to hear the title and variable names, they
users to explore the data in a more accessible (though
don’t realize the automatic alt text won’t tell them
possibly less useful) format (see Chapter 5). When
the point of the graphic. If automatically generated alt
data are presented as maps, content producers
text is used, it must be edited to include the Level 3
should consider including a table as well (one useful
information about what the graph shows, otherwise it
example would be data on COVID-19 incidence by
will be ineffective and frustrating to the reader.
zip code). Including the table will provide access to
Lundgard and Satyanarayan examined whether the variables shown on the map but will not provide
machine learning or artificial intelligence information on the spatial relationships between the
methods can produce the four levels of graphic geographical units.
information.[20] Although the Level 1 elements
In other contexts, supplementary materials are critical
such as chart type, title, and axis labels are often
as the digital infrastructure to provide alt text is still
readily extracted, only the visible portion of Level
missing. One study found that in an analysis of 300
2 information emerges from a machine learning
open-science journals, there was nothing about alt
approach. Information about Level 3, which provides
text in their guidelines for authors.[23] Most academic
the “‘overall gist’ of complex trends and patterns,” and
publishing systems have no infrastructure to include
Level 4—which requires human perception, cognition,
alt text along with images. One workaround option is

36 D O N O H A R M G U I D E
to provide full information on the displayed variables, patterns found in the data, and tell a user why you
trends, and patterns in the results and discussion chose to include the data visualization. Although many
sections of papers; another is to provide alt text as guidelines emphasize brevity, completeness is critical
supplemental information that can be downloaded for equal access to information. If media infrastructure
from the journal website. does not support alt text, data practitioners must find
a way to provide it.
Many social media platforms have infrastructure
for alt text. On some platforms, alt text has a low
character limit. In these situations, consider placing
Strategies for Writing Good Alt Text
alt text in comments or replies and including a
statement like “image description in comments” in Alt text should provide meaningful
the main body of posts. information to the user. Of course, what
is meaningful to one user may not be
Recognizing that all observers have some inevitable meaningful to another user, so there is not a
bias, alt text descriptions of data visualizations should single right answer to writing good alt text.
present data as objectively as possible. Jung and You may even notice that the alt text in this
colleagues report that blind users prefer that alt texts report varies from chapter to chapter and
not use judgements of how large differences are.[24] author to author.
Readers do not want “subjective interpretations” or
contextual information, and they do not want the Generally speaking, alt text should be written
author’s opinion.[25] If a graph shows uncertainty, with the same punctuation and capitalization
describe it. If numbers need to be estimated, state as regular text, but again, that also will
that. Do not conflate correlation of two variables with depend on the user and how the user has set
causation. General considerations around alt text, up their screen reader.
including punctuation and mathematical symbols, are Punctuation marks like periods, commas,
explored in the box on the next page (and see Chapter and dashes inform the way the screen
8 of this volume). reader uses intonation and pauses to
In their work on artificial intelligence for object simulate natural speech, which can improve
recognition for blind people, Bennett and Keyes point comprehension but can be problematic in
out that these descriptions are likely to replicate the certain cases. Unlike with regular text, it’s not
biases of human observers and programmers.[26] But possible to navigate by word or by character
information from computers is often put on a to clarify what’s being said, so it’s important
pedestal and assumed to be correct. Whether the to make sure the alt text can be read clearly.
describer is human or artificial, a power differential There are some key aspects of alt text to
between the describer and reader exists, which consider, especially when it applies to
authors should consider. data visualization:
Ultimately, writing effective, complete alt text is • Describe the meaningful aspects of the
an important skill for authors to master in order to graph, chart, or diagram. Tell the user the
communicate the meaning of their data. With current most important feature of the image and
limitations inherent with screen readers, machine what they should take away from it. Provide
learning, and artificial intelligence, this skill will enough context about the type of graph,
remain necessary for the near future. Good alt texts variables, and quantities for the reader to
should create a mental framework for the variables understand the takeaways.
and quantities shown, include information about the

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 37
 • Contain some measure of quantitative data • Avoid repeating chart titles. If the title is
if the figure does as well. If there is a specific available somewhere else in the text that a
data point or two you want to highlight, screen reader will read aloud, it shouldn’t be
include it in the alt text. repeated in the alt text. (This advice differs
for an image on social media, where the title
• Remain brief and to the point. If you need
is part of the image.) More generally, you
to describe every data point, then provide
can just tell the reader what the chart title
an alternative format, such as a table or long
is. The alt text for a line chart showing the
description, in the appendix or elsewhere.
unemployment rate might say, “A bar chart
• Limit the amount of symbols, such as that shows the unemployment rate over time
vertical bars (or “pipes”), slashes, colons, and with the title, Unemployment Rate in the
semicolons, as well as em dashes and en United States from 1950 to 2020.” In this
dashes. These symbols are voiced by screen case, the phrase “with the title” and the
readers and add to the audio noise during the existing punctuation makes the title clear. If
voicing of the alt text. Commas are usually you wanted to omit the words “with the title”
voiced as short pauses and periods as long to save characters, quotation marks around
pauses, and many screen readers will vocalize the actual chart title might be useful. In this
dashes, colons, and semicolons. Writing “x way, the reader could check to see if the
divided by y” will be clearer than writing “x/y” phrase was the actual title or a description
because the slash also has a nonmathematical of the chart.
meaning.
Ultimately, write alt text like you would write
• Limit the use of URLs because they are not
normal text. Screen readers are optimized for
activatable in alt text. If you must use them,
existing text patterns and expect alt text to
spelling out “dot com” will help denote
be written in those forms. Users can control
the URL.
how much punctuation marks are spoken,
• Capitalizing acronyms will usually force text but the specifics of that functionality will
to be read letter by letter (unless they are vary by tool and platform. Other guidelines
commonly known ones that are pronounced for writing data visualization alt-texts are
as words), but writing them in lowercase will the DIAGRAM Center Image Description
usually lead to them being pronounced as Guidelines and WGBH’s Guidelines for
words. If the alt text includes “ui” instead of Describing STEM Images.[27]
“UI,” most screen readers will try to pronounce
the two vowels as a word, which will certainly
sound weird.

38 D O N O H A R M G U I D E
Chapter Four Notes
[1]
Crescentia Jung, Shubham Mehta, Atharva Kulkarni, Yuhang Zhao, and Yea-Seul Kim, “Communicating Visualizations without Visuals:
Investigation of Visualization Alternative Text for People with Visual Impairments,” IEEE Transactions on Visualization and Computer Graphics
28, no. 1 (2021): 1095–105; and Jay Wickard, “Is Accessibility Part of “Open” Science?,” Practical Data Management for Bug Counters
(WordPress blog), July 13, 2021, https://practicaldatamanagement.wordpress.com/2021/07/13/is-accessibility-part-of-open-science/
Jung et al., “Communicating Visualizations without Visuals”; Silvia Canelón and Liz Hare, “Revealing Room for Improvement in Accessibility
[2]

within a Social Media Data Visualization Learning Community,” presentation given at csv,conf,v6 (virtual conference), May 4, 2021 https://
github.com/spcanelon/csvConf2021.
[3]
Frank Elavsky, Cynthia Bennett, and Dominik Moritz, “How Accessible Is My Visualization? Evaluating Visualization Accessibility
with Chartability,” EuroGraphics Conference on Visualization (EuroVis) 41, no. 3 (2022), https://www.frank.computer/chartability/#ref-
USImproving.
[4]
Elavsky, Bennett, and Moritz, “How Accessible Is My Visualization?”
Canelón and Hare, “Revealing Room for Improvement in Accessibility within a Social Media Data Visualization Learning Community”;
[5]

and Alan Lundgard and Arvind Satyanarayan, “Accessible Visualization via Natural Language Descriptions: A Four-Level Model of Semantic
Content,” IEEE Transactions on Visualization and Computer Graphics 28, no. 1 (2021): 1073–83.
[6]
Canelón and Hare, “Revealing Room for Improvement in Accessibility within a Social Media Data Visualization Learning Community”
Jonathan Schwabish, Better Data Visualizations: A Guide for Scholars, Researchers, and Wonks (New York: Columbia University Press,
[7]

2021).
[8]
Ben Shneiderman, “Tree Visualization with Tree-Maps: 2-d Space-Filling Approach,” ACM Transactions on Graphics (TOG) 11, no. 1 (1992):
92–99.
See also Lundgard and Satyanarayan, “Accessible Visualization via Natural Language Descriptions: A Four-Level Model of Semantic
[9]

Content.”
[10]
Jung et al., “Communicating Visualizations without Visuals.”
Amy Cesal, “Writing Alt-Text for Data Visualization,” Nightingale Journal of the Data Visualization Society, July 23, 2020, https://medium.
[11]

com/nightingale/writing-alt-text-for-data-visualization-2a218ef43f81.
[12]
Lundgard and Satyanarayan, “Accessible Visualization via Natural Language Descriptions: A Four-Level Model of Semantic Content.”
[13]
Lundgard and Satyanarayan, “Accessible Visualization via Natural Language Descriptions: A Four-Level Model of Semantic Content.”
[14]
Lundgard and Satyanarayan, “Accessible Visualization via Natural Language Descriptions: A Four-Level Model of Semantic Content.”
[15]
Lundgard and Satyanarayan, “Accessible Visualization via Natural Language Descriptions: A Four-Level Model of Semantic Content.”
Lundgard and Satyanarayan, “Accessible Visualization via Natural Language Descriptions: A Four-Level Model of Semantic Content”; and
[16]

Jung et al., “Communicating Visualizations without Visuals.”

See “General Guidelines,” Diagram Center, accessed October 21, 2022; “Guidelines for Describing STEM Images,” WGBH.org (Boston
[17]

radio), accessed October 21, 2022, https://www.wgbh.org/foundation/ncam/guidelines/guidelines-for-describing-stem-images; and Cesal,

“Writing Alt-Text for Data Visualization,”
[18]
Edward R. Tufte, The Visual Display of Quantitative Information (Cheshire, CT: Graphics Press, 2001).
Cindy Xiong, Lisanne Van Veelden, and Steven Franconeri, “The Curse of Knowledge in Visual Data Communication,” IEEE Transactions on
[19]

Visualizations and Computer Graphics 26, no. 10 (2019): 2051–3062.

[20]
Lundgard and Satyanarayan, “Accessible Visualization via Natural Language Descriptions: A Four-Level Model of Semantic Content.”
[21]
See https://www.R-project.org/.
Elio Campitelli (eliocamp), “ggdatasaver: Automatically Save Data Associated with a ‘ggplot2’ Plot,” Github repository, last updated October
[22]

6, 2022, https://github.com/eliocamp/ggdatasaver; see also Hadley Wickham, “ggplot2: Elegant Graphics for Data Analysis, Second Edition”
(Berlin: Springer Nature, 2016).
[22]
Wickard, “Is Accessibility Part of “Open” Science?”
[23]
Jung et al., “Communicating Visualizations without Visuals.”
[24]
Lundgard and Satyanarayan, “Accessible Visualization via Natural Language Descriptions: A Four-Level Model of Semantic Content.”
Cynthia L. Bennett, and Os Keyes, “What Is the Point of Fairness? Disability, AI, and the Complexity of Justice,” SIGAccess newsletter 125,
[25]

October 2019, http://www.sigaccess.org/newsletter/2019-10/bennet.html

See http://diagramcenter.org/ and “Guidelines for Describing STEM Images,” WGBH.org (Boston radio), accessed October 21, 2022,
[26]

https://www.wgbh.org/foundation/ncam/guidelines/guidelines-for-describing-stem-images.

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 3 9
 We visualize data because it is often easier
CHAPTER FIVE
to understand in the form of charts and graphs,
Coding but what happens when someone who cannot
Accessible Data see encounters a data visualization? The secret
to making data visualizations accessible
Visualisations for blind people and people who use screen
readers is creating an alternative representation
of the data.
LÉONIE WATSON We can do so by making a few additions to the code used
to create web pages, content, and web applications. This
supplementary code is known as Accessible Rich Internet
Applications, or ARIA—a set of roles and attributes that define
ways to make the code more accessible to people who use
screen readers.

Unlike most chapters in this Do No Harm Guide, this chapter

will consist of several code snippets that demonstrate how
ARIA code can be added to existing web page code to make it
more accessible. My goal is to demonstrate that like any coding
language or library, using ARIA requires understanding syntax and
implementation and how to modify existing code as well as writing
new code. Creating a more inclusive and accessible web should
not be a tremendous burden, especially for readers already familiar
with writing code.

Why Code Is Important

Imagine a door with a sign that says “kitchen.” The door is closed,
and it has a metal plate running down one side. You may not
realize it, but you already know a lot of information about this
door. You recognize it’s a door because you’ve seen one before,
you know its purpose is to let you move from one room into
another, and you recognize that despite the door being closed, you
can open it by pushing against it and end up in the kitchen, not
some other room. In other words, the visual characteristics of the
door tell you what it is, what it’s for, if it’s the door you want, and
how to use it.

Let’s transfer this process to the web. This time, imagine a button
with the word “Search” as its label. You recognize it is a button
because you’ve seen buttons before, you know it will execute a
search when you activate it, and you know you can click on it with
your mouse, tap it with a finger, or use the Space or Enter keys to
make it work.

40 D O N O H A R M G U I D E
But what happens if you can’t see the button? In Understanding SVG Images
that case, you need something else to give you the Images on the computer can come in various
information you need. This is where the code behind file formats, like PNG and JPEG. Those two
a data visualization is important for data accessibility. types are examples of raster files, which
For the button, you’ll need the browser and your are based on pixels or small squares. When
screen reader (see also Chapters 4 and 6) to interact increasing the size of a picture saved as a
and present all that information in the code you use to JPEG file, for example, the squares get bigger
build a web page and its content. and bigger. At some point, the image may
HyperText Markup Language, or HTML, is the become grainy and blurry because there
programming language web developers use to aren’t enough squares in the picture to give
structure web pages and their content, and that our eyes the illusion of smoothness. On the
language has a lot of accessibility information built other hand, SVG images are vector files,
in. We use the words “role,” “name,” and “state” to which store images based on mathematical
describe these built-in features and to assign them formulas and use points and lines on a
to elements on the web. Most HTML elements have grid. As you make an SVG image larger, the
“roles” that describe their purpose: an <img> element— formula updates and the clarity of the image
which is used to embed an image on an HTML page— is preserved.
has the role of “graphic.” Many HTML elements can
be given a “name” (sometimes called an “accessible Although SVG elements have built-in accessibility
name”). A button on a webpage, for example, can be information that is recognized by browsers,
defined by text inside the <button> element. Some screen readers generally do not utilize it. But data
HTML elements also have “attributes” that describe visualizations commonly use SVGs, so we have to take
their state, like the checked attribute that can be used matters into our own hands if we want our data to be
to indicate when a radio button has been selected. If accessible to people who cannot see them.
the checked attribute is present, the radio button will
To make SVG images accessible, we use ARIA to add
be selected, and if it is not present, the radio button
accessibility information ourselves. ARIA, which is
remains unselected.
a web standard created by the World Wide Web
When a document created with HTML is loaded Consortium, can define roles and other accessibility
in the browser, the browser puts all the accessibility properties to HTML or SVG elements on a web page.
information into a structure known as an “accessibility
Let’s see how ARIA works for SVG images. We start by
tree.” When someone using a screen reader goes to
writing some SVG code to draw a button. This code
the HTML document in their browser, their screen
creates a rectangle that will have the word “Play” as
reader asks the browser for the available accessibility
the title. This rectangle will be 75 pixels wide and 50
information about what’s on screen and uses that
pixels tall, and it will have a purple fill and a green
information to let the user know what they’re
border the width of one pixel.
dealing with.

Unfortunately, this does not work so well with what

are called scalable vector graphics, or SVGs. When it
comes to the web, SVG images are useful because the
images will maintain their resolution no matter the size
of the screen, from a phone to a tablet to a
huge monitor.

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 41
<svg version=“1.1”> <svg version=“1.1”>
<rect width=“75” height=“50” rx=“20” <rect role=“button” tabindex=“0” aria-
ry=“20” fill=“#AC4FC6” stroke=“#228b22” pressed=“true” width=“75” height=“50”
stroke-fill=“1”> rx=“20” ry=“20” fill=“#AC4FC6”
<title>Play</title> stroke=“#228b22” stroke-fill=“1”>
</rect> <title>Play</title>
</svg> </rect>
</svg>
We can use the ARIA role attribute to explicitly give
this rectangle the role of a button. The only change in The changes we’ve made so far only apply to making
this code snippet from the original is the addition of the visual aspect of the button accessible to screen
<role=”button”>. readers. To make this SVG button fully interactive, we
have to use JavaScript to provide support for mouse
<svg version=“1.1”> and keyboard interaction so the button can function as
<rect role=“button” width=“75” expected.
height=“50” rx=“20” ry=“20”
fill=“#AC4FC6” stroke=“#228b22”
stroke-fill=“1”> Defining the Data Structure
<title>Play</title> Now let’s discuss how ARIA can be applied to data
</rect> visualizations. When it comes to data structures, ARIA
</svg> is not equipped for anything more sophisticated than
bar charts, line graphs, or flowcharts. In other
Since a button is supposed to be interactive—clicked words, data that can be represented as simple
with a mouse or tapped with a finger—we need to tables or list structures.
make sure that keyboard users (including screen
Consider this simple line graph showing the average
reader users) who may not be able to use a mouse can
number of cups of tea had by people at different times
focus on it with the Tab key. To do this, we use the
of the day. The x-axis shows the different times of day,
<tabindex> attribute (<tabindex=”0”>), which allows
the y-axis shows a range of cups from 0 to 10 in
users to select the button by pressing the Tab key.
increments of 5, and there are two lines that show
<svg version=“1.1”> how much tea Alice and Bob drank.
<rect role=“button” tabindex=“0”
width=“75” height=“50” rx=“20” ry=“20”
fill=“#AC4FC6” stroke=“#228b22” stroke-
fill=“1”>
<title>Play</title>
</rect>
</svg>

If the purpose of the button is to turn something on

or off or to start or stop something, we could also use
the <aria-pressed> attribute to show its state. To show
the user that the “Play” button has been pressed, we
can add the <aria-pressed=”true”> code to the existing
snippet. At first the attribute would have a value of
“false” to indicate the button is not pressed, then it
would update to “true” to indicate that the button has
been pressed:

42 D O N O H A R M G U I D E
Visually,
Visually, you
Visually, you might
you might scan
might scan along
scan along the
along the x-axis
the x-axis to
x-axis to find
to find aaa time
find time
time <g>
<g>
of
of day,
of day, then
day, then
then looklook up
look up
up to to find
to find out
find out how
out how many
how many cups
many cups of
cups ofof <g>
<g>
tea
tea Alice
tea Alice drank.
Alice drank.
drank. ToTo put
To put it another
put itit another way,
another way, you
way, you might
might look
you might look
look <g></g>
<g></g>
along a row of data (i.e., the time of day), then up <g></g>
along
along aa row
row of of data
data (i.e.,
(i.e., the
the time
time ofof day),
day), then up aaa
then up <g></g>
column <g></g>
<g></g>
column (i.e.,
column (i.e., the
(i.e., the person)
the person) to
person) to get
to get the
get the data
the data you
data you want.
you want.
want.
Yes, you guessed it, a line graph can be represented </g>
</g>
Yes,
Yes, you
you guessed
guessed it, it, aa line
line graph
graph can
can be
be represented
represented
as a table. <g>
<g>
as
as aa table.
table.
<g></g>
<g></g>
For
For the
For the data
the data in
data in the
in the line
the line graph
line graph to
graph to make
to make sense
make sense as
sense asas aaa <g></g>
<g></g>
table—and
table—and readable
table—and readable for
readable for the
for the screen
the screen reader
screen reader as
reader as aaa result—
as result—
result— <g></g>
<g></g>
we
we have
we have to
have to rearrange
to rearrange it
rearrange itit soso the
so the rows
the rows represent
rows represent Alice
represent Alice </g>
</g>
and
and Bob,
and Bob, the
Bob, the columns
the columns represent
columns represent the
represent the different
the different times
different times of
times of
of <g>
<g>
day,
day, and the table cells contain the number of cups of <g></g>
<g></g>
day, and
and the
the table
table cells
cells contain
contain the
the number
number of of cups
cups of of
tea that each person drank. Visually, the table will look <g></g>
<g></g>
tea
tea that
that each
each person
person drank.
drank. Visually,
Visually, the
the table
table will
will look
look
like this: <g></g>
<g></g>
like
like this:
this:
</g>
</g>
Person Morning
Morning
Morning Afternoon
Afternoon
Afternoon </g>
</g>
Alice
Alice
Alice 5
55 10
10
10
We
We can
can then
then use
use the
the ARIA
ARIA role
role attribute
attribute with
with
Bob
Bob
Bob 2
22 0
00
different
different values
values to
to let
let browsers
browsers and
and screen
screen readers
readers
First,
First, we
First, we use
we use aaa <g>
use <g> element
<g> element in
element in the
in the HTML
the HTML code
HTML code to
code to
to know the purpose of the different <g> elements.
know the purpose of the different <g> elements.
represent
represent the
represent the entire
the entire table.
entire table.
table. Notice
Notice here
here that
that the
the ARIA
ARIA role
role attributes
attributes define
define the
the
overall
overall table
table structure.
structure.
<g></g>
<g></g>
<g></g>
<g
<g role=“table”>
role=“table”>
Then
Then we
Then we need
we need to
need to nest
to nest three
nest three more
three more <g>
more <g> elements
<g> elements inside
elements inside
inside <g
<g role=“row”>
role=“row”>
it
itit to
to represent
represent the
the rows,
rows, one
one for
for the
the column
column headers,
headers,
to represent the rows, one for the column headers, <g></g>
<g></g>
one <g
<g role=“columnheader”></g>
one for
one for Alice,
for Alice, and
Alice, and one
and one for
one for Bob:
for Bob:
Bob: role=“columnheader”></g>
<g role=“columnheader”></g>
<g role=“columnheader”></g>
<g>
<g> </g>
</g>
</g>
<g></g>
<g></g> <g
<g role=“row”>
role=“row”>
<g></g>
<g></g> <g
<g role=“rowheader”></g>
role=“rowheader”></g>
<g></g>
<g></g> <g
<g role=“cell”></g>
role=“cell”></g>
</g>
</g> <g
<g role=“cell”></g>
role=“cell”></g>
</g>
</g>
</g>
We need to explicitly define the cells inside the table, <g
<g role=“row”>
role=“row”>
We need
We need to
to explicitly
explicitly define
define the
the cells
cells inside
inside the
the table,
table,
<g
<g role=“rowheader”></g>
role=“rowheader”></g>
which we
which we
which can
we can do
can do by
do by adding
by adding more
adding more <g>
more <g> elements.
<g> elements. In
elements. In
In this
<g
<g role=“cell”></g>
role=“cell”></g>
this case,
this case,
case, we will
weend
we will end
will up up
endwith with
up with three
threethree rows
rowsrows and three
and three
and three
<g role=“cell”></g>
<g role=“cell”></g>
columns—thus,
columns—thus, three
three cells
cells in
in each
each
columns—thus, three cells in each row. row.
row.
</g></g>
</g>
</g>
</g>

C
CEEEN
C NTTTEEERRRIIIN
N NG
N G AC
G ACC
AC CEEESS
C SSIIIBBBIIILLLIIITTTYYY IIIN
SS ND
N DATA
D ATA V
ATA VVIIISSSU
UA
U AALLLIIIZZZAT
ATIIIO
AT ON
O N4
N 443
33
Identifying Parts of the Visualisation be the content of the left-most cell in each row of our
With the basic data structure in place with the table structure for screen reader users.
appropriate roles, we can turn our attention to the Let’s start by adding a <path> element to the first cell
next piece of accessibility information—an element’s in the next row of our table data structure:
name or accessible name. Here, we begin adding the
data to the structure. <g role=“row”>
<g role=“rowheader”><path></path></g>
We’ll start with the information on the x-axis, the
<g role=“cell”></g>
different times of day. We want this information to
<g role=“cell”></g>
appear visually on the graph and to be accessible to
</g>
screen reader users, so the <text> element is a good
choice. We’ll add this to the first row of the table. Next, we need to give the <path> element an
accessible name so screen reader users know what the
<g role=“row”>
line represents. We can do so with the <title> element.
<g></g>
<g role=“columnheader”> (The highlighted text shows the new code we’ve added
<text>Morning</text> to the initial code block.)
</g>
<g role=“row”>
<g role=“columnheader”>
<g role=“rowheader”>
<text>Afternoon</text>
<path>
</g>
<title>Alice</title>
</g>
</path>
</g>
Think back to the door you imagined at the start of
<g role=“cell”></g>
this chapter. Perhaps you pictured it as a wooden door
<g role=“cell”></g>
with green paint and a sign in a bold font, or maybe </g>
you saw a neutral-colored door with a discrete sign.
Whatever colour or sign type, it was still a door and Now, we need to make the screen reader think that
that information let you make reasonable deductions the <path> element is actually an image, so we add
about what it was for and how to use it. It’s the same <path role=”img”> to this bit of code.
with our line graph. To a blind person, it doesn’t
matter how the data look; it only matters that they can <g role=“row”>
identify what the data are and what the data’s purpose <g role=“rowheader”>
is so they can make some reasonable deductions <path role=“img”>
<title>Alice</title>
about what to do with the data.
</path>
In other words, we’re putting in place an invisible </g>
structure that will be meaningful to someone who <g role=“cell”></g>
cannot see the line graph, then layering the visual <g role=“cell”></g>
representation of the data over the top. </g>

The most likely SVG element for adding the lines to

Within our code, we want to plot some points along
the graph is the <path> element. For the purposes
each line so that screen reader users can know the
of making our line graph accessible to screen reader
specific data points. By doing so, we create the
users, the <path> elements are going to do double
content for the cells in our table structure. Given that
duty. They’re going to represent the visible lines on
in our chart, the data is just plotted as a line, and as
the graph that everyone will see, and they’re going to

44 DO NO HARM GUIDE
such, each point has the same visual appearance, we information twice, we can use a little bit more ARIA.
need a common pattern to define the plot marker
Suppose the y-axis will be represented using another
only once. Then, we can duplicate it using the <use>
<g> element. To hide it and all its content from screen
element. We use the same techniques as before
reader users, we can use the <aria-hidden> attribute,
to give each <use> element the “img” role and an
like this:
accessible name using the <title> element, so the
plotted points are accessible to screen reader users. <g aria-hidden=“true”></g>
Again, we are just adding a few short lines of code
here, highlighted in yellow. This same technique can be used to hide any other
visual aspects of the line graph that would otherwise
<g role=“row”>
hinder screen reader users. Be careful with this
<g role=“rowheader”>
technique, though. When you use <aria-hidden>,
<path role=“img”>
everything inside that element will be hidden from
<title>Alice</title>
screen readers, so make sure you apply it thoughtfully
</path>
to your code. You should never use <aria-hidden> to
</g>
<g role=“cell”> hide an element that is intended to be interactive.
<use role=“img”> If we put all the additions to our SVG code together,
<title>5 cups</title> the basic code for our ARIA enhanced line graph looks
</use>
like this:
</g>
<g role=“cell”> <g role=“table”>
<use role=“img”> <g role=“row”>
<title>10 cups</title> <g role=“columnheader”>
</use> <text>Morning</text>
</g> </g>
</g> <g role=“columnheader”>
<text>Afternoon</text>
These code examples are intentionally simplified for </g>
readability, but the <path> and <use> elements can </g>
be made to give the lines on the graph the visual <g role=“row”>
representation you want. By adding the role and name <g role=“rowheader”>
information, we’ve created a table structure that a <path role=“img”>
screen reader user can navigate by moving up and <title>Alice</title>
down through columns or left and right through rows, </path>
</g>
allowing them to obtain the same data as someone
<g role=“cell”>
who is able to see the lines on the graph.
<use role=“img”>
Hiding Unwanted Content <title>5 cups</title>
The invisible table structure we’ve put in place </use>
has all the information a screen reader user needs </g>
to make sense of the data, but there are other <g role=“cell”>
elements we need for the line graph to make sense <use role=“img”>
<title>10 cups</title>
visually. Although the y-axis isn’t needed in the table
</use>
representation of the data, we do need it visually.
</g>
To avoid screen reader users hearing the same
</g>

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 4 5
<g role=“row”> <g aria-live=“assertive”></g>
<g role=“rowheader”>
<path role=“img”> A live region is a bit like a push notification for screen
<title>Bob</title> readers. As the content inside the live region is
</path> updated, screen readers will automatically announce it
</g>
to the user. In this case, we want the announcement
<g role=“cell”>
to happen right away, so we set the aria-live attribute
<use role=“img”>
to “assertive.”
<title>2 cups</title>
</use> When the button is activated and the animation
</g> starts, the <aria-pressed> attribute is set to “true” to
<g role=“cell”> show that the button has been pressed and a short
<use role=“img”> description of the animation is read into the live
<title>0 cups</title> region. The description could be something like
</use>
the following:
</g>
</g> <g aria-live=“assertive”>
Alice drinks five cups of tea in the morning,
Animating Information and 10 cups in the afternoon. Bob drinks...
</g>
You may want to make your line graph more
interesting by adding a bit of animation. The graph
As the animation plays out on the screen, the screen
could initially appear to be empty, then at the press of
reader automatically explains what the animation is
a button, animated lines could plot themselves along
doing. Notice that the <aria-pressed> attribute is set
the x- and y-axes.
to “false” in the code above. Once the animation has
Visually this would most likely be done using stopped, the button shows that the animation can be
Cascading Style Sheets (CSS), which are used to triggered again by pressing the button.
describe a webpage’s visual characteristics, such as
We could also use data sonification, or representing
colors, layouts, and fonts. To add animation through
the data as sound, instead of a live region. That entails
CSS and to make it accessible to screen reader users,
creating an audio representation that matches the
we just need a little more ARIA. But first, we need to
visual representation of the lines on the graph and
make sure the trigger for the animation is accessible to
triggering it to play at the same time as the visual
everyone. For that, we can reuse the SVG button
animation. For simple patterns where the values
from earlier.
plotted on a graph rise and fall, sonification can be
<rect role=“button” tabindex=“0” aria a good technique. For example, the line on a graph
pressed=“false” width=“75” height=“50” rx=“20” may rise from a low value to a high value, which can
ry=“20” fill=“#AC4FC6” stroke=“#228b22” be represented by a sound that increases in pitch or
stroke-fill=“1”> volume from low to high. For anything much more
<title>Animate graph</title> complicated though, sonification can become difficult
</rect> to interpret without learning the patterns first.

When the button has not yet been pressed, the <aria-
pressed> attribute should have its value set to “false.”

For the animation itself, we need to create something

known as a “live region”:

46 D O N O H A R M G U I D E
Wrapping Up enhanced SVGs) is remarkably inconsistent. For these
We’ve begun to explore the importance of role, name, reasons, you should remember two important things:
and state—collectively known as semantics—for First, accept the creative challenge and experiment
making data visualizations accessible to people who with different ways to make your data visualizations
cannot see them. By creating an underlying structure accessible to screen reader users. And second, test
that makes the data meaningful to screen reader users what you produce with as many different browser and
and by using SVG images (possibly with a little CSS screen reader combinations as you can.
animation) to layer the visualization on top of it, we
created a simple line graph that is accessible to screen
reader users.

You can apply these same techniques to make other

data visualizations accessible, but sadly there is a
caveat: the technologies we have at our disposal,
namely SVGs and ARIA, and the technologies used by
consumers, namely browsers and screen readers, are
limited in their capabilities. As mentioned, ARIA does
not have the roles to support data structures more
complex than tables or nested lists, and browser and
screen reader support for SVGs (even accessibility-

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 4 7
 Data practitioners have many tools to make
CHAPTER SIX
data accessible, and data visualizations are one
Creating Better particularly powerful tool. Visualizations can
Screen Reader summarize data into understandable points,
highlight outliers, or shed light on trends.
Experiences Interactive visualizations enable people to
explore data differently than with a table and
can be a great way of giving people access
SARAH FOSSHEIM to both the high-level trends and the
nuanced details.
As their name indicates, data visualizations typically use a lot of
visual elements and properties to convey information. The color,
opacity, width, height, coordinates, and shape of an element can
all express meaning. And annotations, labels, and other chart
elements can highlight certain properties of the data.

Take this bar chart for example. It shows two years of daily new
COVID-19 cases: each bar represents a date, sorted
chronologically; the bar height represents how many new cases
were registered that day; the horizontal axis label tells us the date;
and the vertical axis labels tell us the number of daily cases.

48 D O N O H A R M G U I D E
Visually, we can spot the following relatively quickly: consuming text in audio format can also benefit people
with cognitive impairments, neurological conditions, or
• When we experienced spikes or outbreaks and
learning disabilities.
approximately how long they lasted, which
is shown by viewing where consecutive bars On the web, screen readers use the content in a web
suddenly gain height. page’s framework (known as the Document Object
Model) or page structure to read the elements on the
• How the outbreaks throughout the pandemic
screen back to the user. Practically, only elements
compared with each other, which is shown by
containing text or specific properties are read
comparing the approximate average height of
to the user.
each of the spikes.
Users can move the screen reader’s focus around
• How COVID-19 spread is progressing currently,
the page through keyboard shortcuts on a desktop
which is shown by comparing the height of the
computer or touch gestures on mobile devices or
bars on the right edge of the graph (the latest few
computers with touchscreens. When the screen reader
days) with the bars before.
focuses on an element, its content gets announced.
• The exact number of cases for any given date, It is possible to jump between all elements on the
which is shown by reading a tooltip that appears page in the order they appear or to navigate between
when hovering over any given bar. headings, sections, and interactive elements. The
With so much information primarily communicated majority of screen reader users navigate web pages by
through visual elements, how can we make this chart headings first.[1]
accessible to blind people? Many blind people use For this section I will focus on VoiceOver, Mac’s
screen readers, a type of assistive technology that built-in screen reader, as an example (I provide a list
reads the page back to them (we’ll discuss them more of others at the end of this chapter). Once VoiceOver
in the next section; see also Chapters 4 and 5), so we is open, users can use the Ctrl + Option + U key
have to take a few extra steps when creating data combination to open the rotor menu (shown on the
visualizations to make sure the same information that’s next page),[2] where we can find a list with all extracted
displayed visually can be read by screen readers. heading elements. Other screen readers have similar
In this essay, I provide guidance on what goes into menus, which can be accessed through their own
creating data visualizations that are accessible shortcut.
to screen readers. I will do so by starting with an This rotor menu lets users browse the contents of
overview of what screen readers are and how they the screen in a different way: it lists all the headings,
work. Afterward, I will demonstrate three different landmarks, links and form elements on the page. For
ways data visualizations can be made accessible example, the following image shows VoiceOver’s
for people using screen readers. Next, I argue why Headings menu. The number in front of the heading
it is important to keep the end user in mind during titles is the heading level and is used to give further
the creation process. I then reflect upon how data context on the page structure.
structures influence which solutions we can use
By reading this list, people using screen readers can
to make our charts accessible and how the chart
get a better understanding of the structure on the
structure plays into that.
page, similar to how a table of contents in a book or
paper might summarize a structure. It’s possible to
How Screen Readers Work
navigate this list using the arrow keys and select an
First, let’s take a closer look at screen readers and
item to navigate to. All of this information is based
how they work. Screen readers are most commonly
on the elements and properties the developers used
used by blind people and people with low vision, but
when building the web page.

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 4 9
 are accessible for people who use screen readers,
developers can include more specific information in
their code.

List of Screen Readers

We used the VoiceOver screen reader tool as an
example in this chapter. On computers running the
Windows operating system, the default screen reader
is called Narrator. It’s also possible to use third-party
software, such as NVDA or JAWS. According to
WebAim’s 2021 Screen Reader Survey,[4] the most
commonly used screen readers are JAWS (70 percent
of respondents commonly use it, 53.7 percent use it
Web pages can be built with both semantic and as their primary screen reader); NVDA (58.8 percent
nonsemantic elements. Nonsemantic elements are of respondents commonly use it, 30.7 percent as their
those that don’t tell the user anything about the primary screen reader); VoiceOver (41.3 percent of
content on the web page—these are the code pieces respondents commonly use it, 6.5 percent as their
that define a section of the page or define groups of primary screen reader); and Narrator (36.8 percent
items on the page. Semantic elements, by contrast, of respondents commonly use it, 0.5 percent as their
define the content on the page—they are code pieces primary screen reader).
that define elements like tables, checkboxes, or submit
buttons. When using semantic elements or equivalent How Data Can Become Accessible
aria roles,[3] the screen reader can communicate extra to Screen Readers
information to the users. In the following example, the Data visualizations contain a lot of graphical
screen reader tells the user they are focused on a information that is more difficult than simple text for
button, that the button is not pressed, what will a screen reader to assess. Sometimes even the visual
happen if they press it, and which shortcut can be properties of text elements (e.g., their positioning) in
used to do so. data visualizations carry meaning, further complicating
matters. We can use a few common techniques to
communicate the insights visualized in charts to
screen readers. Each of those are navigated and read
differently, so they have different implications for the
When the user navigates to the pause button on a music player, user experience.
VoiceOver will say, “Pause Music, selected, toggle button.”
Text Alternatives
When the user navigates to the toggle button on a web
When images or icons are used in applications or on
the web, developers commonly add something called
alternative text to them by using the “alt” attribute
(or as visible text next to the image, if adding an “alt”
When the user navigates to the toggle button on a web page,
VoiceOver will say “You are currently on a toggle button, inside attribute isn’t possible).[5] If a graph isn’t posted as a
web content. To select or deselect this tick box, press Control- static image (e.g., a JPG or PNG file), it can be turned
Option-Space. To exit this web area, press Control-Option-Shift.” into one programmatically by using the “img” role.[6]

The screen reader has access to all of the information The screen reader will read out this alternative text
that the developer includes in their code, turning those when focused on the image.
snippets into audible descriptions. To ensure webpages

50 D O N O H A R M G U I D E
When writing alternative text, experts recommend you both people who are using screen readers and sighted
include in the descriptionthe chart type, people, who can see the individual points on the chart
and interact with them to reveal more data. (Notice
• the type of data visualized,
the alt text I’ve provided below the image describes
• the main conclusion or reason for showing the the basic plot, the ranges on both axes, and the
graph, and overarching point. Notice also that I have not assigned
• a link to the data source.[7] alt text to the actual image in this document because
the alt text is included in the image caption. If both
Chapter 4 goes more in depth on how to craft
existed, a person reading this report with a screen
alternative text. In some situations, we can hand-craft
reader would hear the description twice.)
the alternative text, write it once, and publish it with
the image. This approach does not work as well with As a result, sighted users can use all the information
dynamic or frequently updated data because we would available to draw their own conclusions about what
have to automate the construction of the alternative the data mean. If we want to give people using screen
text as well. readers the opportunity to dive into the data in a
similar way, we need to give them a way of navigating
Further, not every graph can be fully summarized or
the dataset beyond images and text alternatives.
replaced with a few sentences of text. Let’s take this
scatterplot visualizing an ice cream shop’s average
Table Alternatives
order price (in Euros, visualized on the vertical axis)
Although text descriptions are useful for summarizing
compared with the outside temperature (in degrees
data, table alternatives shine when it comes to giving
Celsius, on the horizontal axis).
access to detailed information. Tables can have infinite
rows and columns, which can be structured through
headings, subheadings, and pagination. Additionally,
we can add sorting, filtering, or search functionality to
let users explore the data in their own way.

When tables are built using the appropriate elements[8]

(e.g., using HTML elements such as <table> on the
web), screen reader users get access to more context
around the table and special keyboard commands to
navigate it. Tables can be navigated horizontally and
vertically, and the connected column and row headings
are read out to the user.[9] Because native tables come
with those established interaction patterns, users
don’t have to relearn how to navigate tables across
different products.

The familiarity of tables, along with their ability to

contain a lot of detailed information in a structured
way, offers a reliable and safe way of ensuring the data
Though we may be able to write or generate a high- are always available. With data visualizations, I advise
level summary of this graph’s insights, such alt text still always having a table alternative, even when using
may not be enough to provide the same insights to other strategies such as alternative text. Where

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 51
possible, table alternatives should be displayed buttons, images, or other native components. We can
alongside or close to the graph. In this next example, also group elements and custom navigation to provide
the data visualization has a table and chart view multiple levels of detail.
available, which the user can toggle between using
Recent research from Jonathan Zong and coauthors at
tab navigation.
the MIT Visualization Group demonstrates how a user
can explore a scatterplot across three different design
dimensions.[10]
• Structural navigation, where the user navigates
based on the accessibility structure and jumps
between nested elements.
• Spatial navigation, where the user navigates
based on the chart’s visual coordinate system,
using the down arrow key to jump to the element
that is visually below their current location,
for example.
• Targeted navigation, where the user navigates
based on landmarks and regions. The user could
open the rotor menu, which provides the full
structure of the page, and jump directly to the
relevant section.

Understanding User Needs

Now that we have a better understanding of how
Despite those strengths, tables are not a perfect screen readers work and what common accessibility
solution. They are not great for summarizing data or strategies are, we should take a step back before we
for communicating trends and patterns. Imagine more go further and reflect on why we want to create data
than two years of daily COVID-19 case numbers in visualizations.
tabular format. All the information about the peaks
A fitness tracking app, for example, may use a bar
and duration of the outbreaks exists, just like in the bar
chart to show how many steps someone took today
chart at the start of this chapter, but the user has to
compared with this month’s average. Users might like
interact much more to discover them.
this chart because they can see if they’re on track to
Interactive Scalable Vector Graphics meet their fitness goals. By comparison, a bar chart
As demonstrated in Chapter 5, when developing in a scientific report that shows daily new cases of
graphs using Scalable Vector Graphics, we can add COVID-19 over the span of the pandemic may require
more information for screen readers through more functionality so users can look up values or
ARIA labels. trends for specific dates and periods.
Adding screen reader interaction to SVGs leaves us In the first graph, the main point—how many steps
with a lot of control and choice over what information the user has taken today and whether they have taken
we expose and how we expose it. In Chapter 5, Léonie more or less than their average—can be summarized
Watson shows us how a line chart can be turned into in one sentence. The second graph, on the other
a table structure. Similar methods can be used to hand, provides a lot of data to an audience that wants
make screen readers announce elements such as lists, to explore the details. For this second graph, giving

52 D O N O H A R M G U I D E
people who use a screen reader just a one-sentence Is the Dataset Static or Dynamic?
summary would provide a less robust view of the data Whether a visualization is static or dynamic—that is,
and an insufficient experience compared with the whether the data will update within the visualization—
experience given to sighted users. and how frequently it updates, can limit or change our
solutions. If the visualization is static or only updates
Who Are We Building For?
occasionally and with manual intervention, we have
If we want to create data visualizations with a good
more opportunity for hand-crafted captions or custom
user experience, we need to understand who our users
interactions. But the less control we have over the
are and include them in our processes. In other words,
data, the more generic our solution may have to be or
we need to understand who we are building our
the more edge cases we will have to consider.
visualizations for rather than creating the graph and
hoping it will match our users’ needs and expectations. If the chart updates “live,” meaning without user
interaction, screen reader users will need to be
We should ask ourselves the following:
notified. On the web, we can add the `aria-live`
• Who are our users? attribute on the region that will be updated to prompt
• What are their accessibility needs? the screen reader to announce the updates, either by
interrupting the user (for time-sensitive actions) or by
• What are their technology and data
waiting until they are idle (in most cases).[12]
literacy skills?
How Large Is the Dataset?
• Under which circumstances are they
A bar chart showing the number of visitors a website
visiting the graph?
had each day over the past week only has seven
• How do they expect to interact with the graph? data points, whereas a bar chart showing the daily
visitors over the entire lifespan of the website may
• What information are they after?
contain thousands. When a chart has only a handful
• What actions will they need to take based of data points, it is easier to remember specific data
on the data? or spot trends. But the larger the dataset, the harder
To find some of this information, we can conduct interpreting the data becomes. When exploring a table
user interviews or user testing. Other tools, such or interactive chart with many data points, the user
as accessibility personas,[11] can help us get a better will need to tab through a lot of information, which
overview of different user needs. means we may need to provide them with additional
labels or controls (e.g., pagination or sort and filter
Accessible Data Structures functionality).
All graphs, regardless of how they work or who their What Type of Data Are Visualized?
users are, have one thing in common: they visualize The type of data we are visualizing often influences
data. Because screen readers don’t have access to how we display it. Let’s take the following chart
the visual properties of a chart, it is useful to reflect visualizing the share of ice cream orders that also
on what type of data we’re working with before included a drink. For accessibility, it makes more sense
building the structure. Being strategic with these to focus on the underlying data, the percentages,
considerations will improve the final product and make rather than the visuals of the chart. We don’t really
your workflow better and more efficient. want screen reader users to have to tab through the
values of a hundred cells. In this case, the author
chose to add the percentages in text format next to
the graph.

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 5 3
For the example visualizing COVID-19 cases over time • Creating a different graph focusing only
from earlier in the chapter, the data were shown in a on the trends
bar chart. Each bar represented a date, and the bars
• Adding sorting and filtering functionality
were sorted chronologically, from the oldest date on
to table alternatives
the left to the newest on the right. We read from left
to right visually, so the screen reader should have • Mapping different values to different sounds (a
access to the data in a similar way to give screen process called sonification)
reader users a good experience. The best strategy will depend on the goals for the
There are, of course, an unlimited number of graph visualization, the user’s needs, and the existing
types, and graphs do not necessarily map to data types data properties.
one-to-one. In other words, one type of graph may be
used to show several kinds of data.[13] Accessible Chart Structures
Besides data points, data visualizations contain a lot
Are Any Trends or Patterns Identifiable?
of perceivable information, including headings,
Graphs can be powerful at highlighting trends,
legends, axis labels, and annotations. We should
patterns, and outliers. Think of the graph with the daily
thoughtfully design these other supporting chart
new COVID-19 cases we explored earlier. It didn’t just
elements to provide contextual information for screen
give us access to all the numbers like a table would, it
readers as well.
also showed us how many large spikes we experienced
and when there were prolonged surges. Headings and Captions
Proper use of heading elements can make content
A user should be able to draw the same conclusions
easier to find, as demonstrated in Chapter 7. This
when browsing the chart with a screen reader. We can
organization can also help users understand the page
solve this problem in different ways, including
structure, which provides a way of grouping the data.
the following:
Titles should set a clear expectation about the purpose
• Describing the general trends
of the graph. Additional descriptions can explain how
• Grouping data points and offering to read the chart, interact with it, or interpret the data.
custom navigation

54 D O N O H A R M G U I D E
We can also summarize the visualization in text as Order of Elements
part of the heading or description of a graph, which The coordinates and styling determine how data
everyone can read and understand. points are sorted visually, while screen readers base
themselves on the order of the elements in the
Explanatory Chart Elements
accessibility tree.[14]
Additional explanatory chart elements can be
instrumental for understanding the data. The ticks For this chart, the screen reader experience differs
on the vertical axis of a line chart, for example, give greatly from a visual experience depending on the
us an idea of the minimum and maximum values in underlying organization.
the dataset. The legend of a graph tells us which
Following this structure, a user can tab through all of
categories of data are represented.
the elements in an order that matches how we expect
Without extra context, those elements might not make to browse the chart visually:
much sense. We can choose to hide elements that only
1. Title
serve a visual purpose, as demonstrated in Chapter
5, or we can extend their labeling and functionality to 2. Description
provide more context to screen reader users. The label 3. All the bars
of either axis can be extended to include information
¡ Sorted by date
about the range of numbers visualized on it, which
we can see demonstrated in the mockup below. The ¡ First the date is announced,
scatterplot comparing the outside temperature to ice then the value
cream sales has a summarizing label added to each axis
but visually hidden; this gets read instead of the ticks.

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 5 5
 Simplified code:

<h3>Daily visitors</h3>
<p>Average amount of visitors per day of the week
</p>

<g>
<text x=“0”>Monday: 100</text>
<text x=“20”>Tuesday: 174</text>
<text x=“40”>Wednesday: 92</text>
<text x=“60”>Thursday: 193</text>
<text x=“80”>Friday: 103</text>
<text x=“100”>Saturday: 104</text>
<text x=“120”>Sunday: 294</text>
</g>

A screen reader would read this chart like this: elements fit into this structure. For example, it might
make more sense to make the screen reader announce
Transcript of graph 1: “List, seven items. Monday:
the title and range of each axis as a summary before
100 visitors, 1 of 7. Tuesday: 174 visitors, 2 of 7.
going through the actual data.
Wednesday: 92 visitors, 3 of 7. Thursday: 193 visitors,
4 of 7. Friday: 103 visitors, 5 of 7. Saturday: 104 Interaction
visitors, 6 of 7. Sunday: 294 visitors, 7 of 7. If a data visualization has pointer action available,
End of list.” [15] the same actions should be accessible for users who
only use a keyboard. A tooltip that exposes more
Now let’s take a different chart that visually looks the
information when hovered over should expose that
same but has the following structure (next page):
same information when it is focused on through
Transcript of graph 2: “List, 7 items. Friday: 103 keyboard interaction.
visitors, 1 of 7. Monday: 100 visitors, 2 of 7.
Screen reader users should also clearly be shown
Wednesday: 92 visitors, 3 of 7. Tuesday: 174 visitors,
which elements are interactive and what state they
4 of 7. Sunday: 294 visitors, 5 of 7. Thursday: 193
are in. As demonstrated in Chapter 5, we can use the
visitors, 6 of 7. Saturday: 104 visitors, 7 of 7. End of
button role, combined with the “aria-expanded” or
list.”[16]
“aria-pressed” element, to do this.[17]
In this second chart, the dates are not read in
chronological order. Here, the screen reader Accessibility-Driven Visualizations
announces Friday first, then Monday, then Wednesday,
How we design the screen reader experience
and so on. The reason this happens is because while
depends on what data are visualized, who the
the styling determines the order elements are placed
visualizations are for, which context they exist in, and
visually, it’s the Scalable Vector Graphics structure that
under which circumstances they are used. Designing
generally determines the order for screen readers.
this experience fits right into other usability or
Therefore, you must be mindful of sorting your information architecture processes we may already be
datasets correctly before rendering them. Data should following, because assistance technology bases itself
be sorted in a way that makes sense and follows the on the structure of the visualization and the elements
visual representation. Similar to how the order of it contains.
the data points matters, think of how the other chart

56 D O N O H A R M G U I D E
 Simplified code:

<h3>Daily visitors</h3>
<p>Average amount of visitors per day of the week
</p>

<g>
<text x=“80”>Friday: 103</text>
<text x=“0”>Monday: 100</text>
<text x=“40”>Wednesday: 92</text>
<text x=“20”>Tuesday: 174</text>
<text x=“120”>Sunday: 294</text>
<text x=“60”>Thursday: 193</text>
<text x=“100”>Saturday: 104</text>
</g>

Although a common workflow may be to design a Although making data visualizations accessible
visualization first and later think of how or if that to screen readers may seem like extra work,
visualization can be made accessible to screen data practitioners can actually create a good and
readers, we should instead start thinking about meaningful experience for all audiences if they have
accessibility as early as possible so we can make the the foresight to consider accessibility from
right decisions from the start. Integrating accessibility the beginning.
into existing processes or creating new ones that
account for accessibility can help us prioritize
accessibility in data visualization. This includes the
testing and quality control of our charts. User tests
with blind people are important to ensure we’re
providing a good and meaningful experience, and
audits or internal reviews can help us discover and
mitigate issues before they reach the user.

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 57
Chapter Six Notes
[1]
“Screen Reader User Survey #9 Results,” WebAIM, last updated June 30, 2021, https://webaim.org/projects/screenreadersurvey9/.
[2]
“ARIA - Accessibility,” MDN Web Docs, last modified October 2, 2022, https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA.
“Semantics,” MDN Web Docs, last modified September 20, 2022, https://developer.mozilla.org/en-US/docs/Glossary/Semantics; “WAI-ARI
[3]

Roles,” MDN Web Docs, last modified September 16, 2022, https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles.
See the Screen Readers Commonly Used section of “Screen Reader User Survey #9 Results,” WebAIM, last updated June 30, 2021, https://
[4]

webaim.org/projects/screenreadersurvey9/#used.
[5]
“Alternative Text,” WebAIM, last updated October 19, 2021, https://webaim.org/techniques/alttext/; https://developer.mozilla.org/en-US/
docs/Web/HTML/Element/img#attr-alt
“<img>, the Image Embed Element,” MDN Web Docs, last modified October 10, 2022, https://developer.mozilla.org/en-US/docs/Web/
[6]

Accessibility/ARIA/Roles/img_role.
[7]
Amy Cesal, “Writing Alt Text for Data Visualization,” Nightingale, the Journal of the Data Visualization Society, July 23, 2020, https://
medium.com/nightingale/writing-alt-text-for-data-visualization-2a218ef43f81.
[8]
“Creating Accessible Tables,” WebAIM, last updated September 18, 2017, https://webaim.org/techniques/tables/data.
Léonie Watson “How Screen Readers Navigate Data Tables,” Tink.uk, September 28, 2020, https://tink.uk/how-screen-readers-navigate-
[9]

data-tables/.
Jonathan Zong, Crystal Lee, Alan Lundgard, JiWoong Jang, Daniel Hajas, and Arvind Satyanarayan, “Rich Screen Reader Experiences for
[10]

Accessible Data Visualization,” Computer Graphics Forum (Proc. EuroVis) 41 (2022): http://vis.csail.mit.edu/pubs/rich-screen-reader-vis-
experiences/.
[11]
Accessibility Personas,” AlphaGov, accessed November 28, 2022, https://alphagov.github.io/accessibility-personas/.
ARIA Live Regions,” Mozilla Developer Network, last modified October 26, 2022, https://developer.mozilla.org/en-US/docs/Web/
[12]

Accessibility/ARIA/ARIA_Live_Regions.
See, for example, Jonathan Schwabish, “Better Data Visualizations: A Guide for Scholars, Researchers, and Wonks” (New York: Columbia
[13]

University Press, 2021).

“Accessibility Tree,” MDN Web Docs, last modified September 20, 2022, https://developer.mozilla.org/en-US/docs/Glossary/Accessibility_
[14]

tree.
[15]
Sarah Fossheim, “Daily Visitors, Example #1,” CodePen, accessed October 19, 2022, https://codepen.io/fossheim/pen/LYQKYxZ
[16]
“Sarah Fossheim, “Daily Visitors, Example #2,” CodePen, accessed October 19, 2022, https://codepen.io/fossheim/full/dydByJv
“Aria-expanded,” MDN Web Docs, last modified September 13, 2022, https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/
[17]

Attributes/aria-expanded; “Aria-pressed,” MDN Web Docs, last modified September 25, 2022, https://developer.mozilla.org/en-US/docs/
Web/Accessibility/ARIA/Attributes/aria-pressed.

58 D O N O H A R M G U I D E
PART FOUR
Accessibility Testing
and Remediation
 My father has retinitis pigmentosa, a genetic
CHAPTER SEVEN
disorder that gradually cost him his sight as I
Practical was growing up. As a result, I was introduced
Accessibility to software screen magnifiers, high-contrast
themes, and screen readers at an early age. He
Testing for Data listened to audiobooks with a DAISY player—a
Visualizations special hardware audio player invented for
people with low vision or blindness—and used a
white cane to navigate in public.
If my father didn’t have his disabilities, I would have not known very
LARENE LE GASSICK much about assistive technologies. Many people who do not work
in spaces directly related to disability and accessibility have never
heard of a screen reader, a braille display, or a switch control, all of
which are known as “assistive devices” or “assistive technologies.”

Unfortunately, most of the web is built with sighted

or mouse-first users in mind. But assistive technologies can help
people navigate their computer and smart device.

A screen reader uses a synthetic voice to describe what is

happening on the screen. A refreshing braille display uses a
live-updating braille tactile display instead of a synthetic voice.
Screen-magnifying software enlarges the screen from 150 percent
to over 500 percent of the original display size to aid those with
low vision. Text readers read aloud content while visually
highlighting each word for those with cognitive disabilities such
as dyslexia, and alternative input devices, such as voice control
software, head pointers, eye trackers, and switch controls allow
people with some physical disabilities to navigate a website using
only their keyboard. Most screen reader users are also keyboard-
only users. Operating systems also come with personalization
options, which allow a user to adjust text size, reduce animation,
and turn on a high-contrast theme.

In this essay, I describe an easy-to-follow testing process so people

who have never tested their data visualizations for accessibility
can ensure their products work just as well for people who use any
of the above assistive technologies. Many existing articles about
accessibility testing simply provide a checklist of tests and a list
of tools, but they do not go into details about the process. I have
also created a list of additional tools you can use in your own work,
available later in this volume.

60 D O N O H A R M G U I D E
Digital Accessibility Standards The Testing Process
Creators of digital apps, content, and services should We use accessibility testing to identify and remediate
be aware of how people with disabilities use these inaccessible web practices.[7]
technologies in their daily life. How would you build a
Two types of accessibility testing exist: personal
wheelchair ramp if you didn’t know how a wheelchair
testing, which all data practitioners should learn to
worked or that wheelchairs even existed? More
ensure people with disabilities aren’t excluded from
importantly, what if you didn’t know who uses a
their work, and professional “accessibility auditing,”
wheelchair and why?[1]
which is conducted by someone trained to report a
With so many different types of assistive technology, list of issues for the client to fix—a process known
web browsers, and device operating systems, how as “remediation.” In this essay, I will cover how data
can we support all users? Luckily, there is some practitioners can begin to do personal accessibility
standardization. testing, but companies should schedule regular
accessibility audits for their publications, websites,
Just like the physical construction industry has
or applications. Audits, at a bare minimum, test for
building standards and guidelines for accessibility,
WCAG compliance, and in the best cases, will check
such as the angle and width for a wheelchair ramp,[2]
for usability issues and recommend solutions based on
the web also has standards and guidelines for digital
inclusive design principles, user research, and testing
accessibility. The Web Content Accessibility Guidelines
with assistive technology users and people with
(WCAG) working group,[3] which is part of the Web
disabilities.
Accessibility Initiative, an international initiative to
develop standards to create a more accessible internet, The testing process I discuss here is my personal
publishes guidelines and “success criteria” that can be process, but every accessibility tester’s techniques
applied to a range of websites and applications and and tools are tailored to their needs. Some methods
serve as a foundation for many countries’ compliance are shared and new and improved tools are released
and antidiscrimination laws. Unfortunately, the regularly, but I have found these basic tasks and tests
technical nature of the guidelines has made them quite to be sufficient for general purposes.
inaccessible to someone new to web accessibility.
I break up my testing procedure into the following
A deep understanding of WCAG is not needed to
four categories:
create accessible content or conduct accessibility
testing and the WCAG 2.1 At a Glance web page • Content
succinctly summarizes the most important aspects • Visual
and requirements to creating more accessible online
• Nonvisual
content.[4]
• Interaction
In 2021, Frank Elavsky created a set of guidelines
called the Chartability project to allow anyone in For purposes of this essay, I assume that the
the data field to conduct accessibility testing of data publication, website, or application surrounding the
experiences in any context, not just the web.[5] data visualization—whether a chart, graph, diagram, or
Elavsky worked closely with experts in the other piece of content—is accessible enough for the
cross-over of accessibility, disability, and data chart to be reached by the reader or user.
visualization communities, and he has tested the
Before we begin testing, we need to have the right
usability of the Chartability workbook with many
tools at our disposal. Here I list common accessibility
data visualization practitioners.[6]
issues and the tools or settings that I currently use to
test charts and data visualizations, but a longer list

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 61
with additional resources and reference materials is In the supplemental list of accessibility tools at the end
available at the end of this volume. If you are new to of this volume, I include a guide to changing color
accessibility testing, start with these tools, but don’t be contrast in Windows 11.[9]
afraid to try others based on your personal preference
Mac operating systems don’t have a “high-contrast
and workflow. For testing with screen readers in
mode” like Windows, but the Dark Background and
particular, I recommend you watch the introductory
Light Text Firefox add-on for the Firefox browser offers
videos linked in endnote 1.
a comparable simulator.[10]
Color Contrast
Color Vision Deficiency
For low-vision users, a data visualization must have
The data visualization field often focuses on color
sufficient contrast between text and background.
vision deficiency (CVD), commonly known as “color
Contrast measures the difference in luminance
blindness.” But people with vision impairments can
between two colors. The contrast ratio between black
struggle with different kinds of color issues, not just
(hex code #000000) and white (#FFFFFF) is 21:1. The
distinguishing between, say, red and green (a condition
WCAG 2.1 AA standard defines an acceptable contrast
known as deuteranopia).
ratio as at least 3:1 for large or bold text and icons and
4.5:1 for general reading text. Many tools can test for different kinds of CVD, but
Color Oracle is my favorite.[11] Color Oracle is a free
Dozens of contrast checking tools are available.
simulator for Windows, Mac, and Linux that takes
I use the TPGi Colour Contrast Analyser,[8] which
the guesswork out of designing for color blindness by
is a downloadable tool that enables you to test
showing you in real time what people with common
the contrast of your color palette against
CVDs see.
WCAG guidelines.
Reduced Motion
A user’s operating system might also include settings,
People with vestibular disorders or who are easily
such as high-contrast mode, that can test the color
nauseated by animation and movement often turn
contrast of a data visualization. In the Windows 10
on their system’s “reduced motion” or “animation off”
operating system, you can activate high-contrast mode
setting. Web developers can use “@media screen”
in Settings > High Contrast > Turn On High Contrast.
and “(prefers-reduced-motion: reduce)” in their CSS
The most commonly used high-contrast theme is white
animations to provide a nonanimated alternative for
text on a black background with bright yellow accents.
users who are affected by strong animation. More

62 D O N O H A R M G U I D E
generally, when creating animation or movement, it is ¡ Screen Reader Basics: VoiceOver tutorial
good practice to turn off autoplay and give the user (12 minutes)[14]
control to start or stop an animation.
¡ Reference for VoiceOver Keyboard
For testing, you can adjust these settings on Windows Shortcuts on a Mac[15]
and Mac operating systems:
Part 1: Testing an Image of a Chart
• Windows: Settings > Ease of Access > Display
A great starting point to learn accessibility testing is
> Simplify and Personalize Windows. Set Show
with a chart in an image format like JPG or PNG (rather
animation in Windows to off.
than one that is natively interactive on a website). If a
• Macs: System Preferences > Accessibility > chart is an image, it is usually complementary to the
Display and check the box for Reduce Motion. surrounding text and has a single clear takeaway.
Screen Reader To demonstrate, let’s begin with this default chart
Using screen readers to test your content will allow image exported from Google Sheets. It’s a column
you to catch many critical accessibility issues in your chart titled “Interstate Arrivals and Interstate
data visualizations and your content more generally. Departures,” with two data series, interstate arrivals
The most common screen readers are VoiceOver for and interstate departures, denoted by blue and red
Mac and NVDA, JAWS, or Narrator for Windows. I columns, respectively. The x-axis is the categorical
use VoiceOver and NVDA because they are free and Australian State (for readers who doesn’t know
most familiar to me. I work on Windows and Mac Australia’s geography, the country has six states and
computers, but you only need to test with one. I two territories), and the y-axis is the number of people
recommend watching the introductory videos linked (not labeled).
in the list below and having on hand a quick reference
guide of screen reader keyboard commands (I usually
have mine printed out). I don’t use a screen reader
every day, so I often forget the keyboard commands
between each testing session.
• Windows: NVDA is one of the most popular
screen readers for Windows users. It works with
all modern web browsers, email programs, music
players, and Microsoft Office programs. NVDA
does not offer any introductory tutorial, so I
recommend you watch the following video: Despite this chart being a default chart for one of the
¡ Screen Reader Basics: NVDA tutorial (9 most popular charting tools in the world, it has many
minutes)[12] accessibility and usability issues.

¡ Reference for NVDA Keyboard Shortcuts on As I mentioned, accessibility tests are split into four
Windows[13] categories: content, visual, nonvisual, and
interaction.[16]
• Mac: VoiceOver comes installed with MacOS.
When you first open VoiceOver, you will be given Content Testing
the option to complete an interactive learning
By making the content in the graph accessible, readers
tutorial, which I recommend you take the time to
are better positioned to understand the graph and
complete; you should also watch the following
your argument. So the checklist below applies to all
introductory video:

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 6 3
good data visualizations, not just those for people ¡ Chart contains a suitable summary, in the
with disabilities. chart, or in surrounding text. No summary
is present.
Content Testing Checklist
• Chart contains a descriptive title. ¡ Chart axes are labeled clearly. The y-axis is
not labeled.
• Chart contains a suitable summary either in the
chart or in the surrounding text. ¡ Chart series are labeled clearly. The
series labels contain too much text, and a
• Chart uses plain language.
descriptive title makes them redundant.
• Chart axes are labeled clearly.
• Extra consideration
• Chart series are labeled clearly.
¡ If the chart can be used for analysis
• The numerical data is formatted clearly. and is not adequately described by a
• If the chart can be used for analysis or to chart summary, a raw data table or a
form one’s own insights and is not adequately CSV download of the raw data should
described by the chart summary, then a raw be provided as an alternative. This
data table or a CSV download of the raw data is consideration would depend on the larger
provided as an alternative. context in which the chart is used.

Content Testing Process No real science exists on how to fix these issues, so it
takes practice and testing with users. If you’re not sure
We start with the content review process because it
what to write, consider these leading questions:
could necessitate quite drastic changes in the design
of the visualization. Accessible content is essential for • What is the main takeaway for this chart?
people with cognitive or intellectual disabilities, people Describe what you want people to take away
who have low data literacy, or in this case, people from this chart in a concise, active sentence.[18]
who might not be familiar with Australian geography. This description becomes the chart title.
In this example, the title was not descriptive, and • How would I describe this chart for a person who
the summary and y-axis label were missing. Also, the
cannot see it? Think about what is interesting
number formatting did not contain a comma, making
about this chart and what about this chart informs
it hard for people to read. A good rule of thumb for
the context in which a reader will see it. That
accessible text is to aim for a ninth-grade reading level;
explanation becomes the chart summary.
I recommend the Hemingway Editor for assessing the
reading level of your writing.[17] For this chart, I’d also provide the raw data, either as
an HTML table or as a downloadable CSV file (Note
Let’s look at what works and what doesn’t:
that CSV is the most accessible format for table data—
• Passes not everyone has Microsoft Excel).

¡ Chart uses plain language. The chart Content Testing Results

doesn’t use a lot of jargon or By working through this checklist, we have made
technical verbiage. several changes to the original chart. The chart title
• Failures now reads “Interstate Migration in Australia, Year
Ending June 2020” and we have a chart summary just
¡ Chart contains a descriptive title. The title below: “Queensland had the highest net gain from
does not mention important details such as interstate migration of 25,300 people.” We’ve also
the country and year.

64 D O N O H A R M G U I D E
Before content testing After content testing

added a y-axis label— “Persons (thousands)”—and flourishes. Examples of sans-serif fonts include
simplified the legend to “Arrivals” and “Departures.” Arial, Courier, and Helvetica).
But we’ve also introduced a new accessibility issue: the • The chart can be zoomed or magnified.
chart summary uses the default text color of light gray,
which will fail the contrast tests in the next step.
• If the chart has a transparent background, it
meets the above contrast requirements in high-
Visual Testing contrast (forced styles) mode.

Visual testing focuses on making the experience • If the chart is animated, it must not contain
inclusive for users with low vision or CVD. These tests flashing that could cause seizures.
can also ensure that text is more readable for someone • If the chart is animated, it must be able to be
with dyslexia and that animations do not cause nausea
paused or stopped, and the animation should not
or epileptic seizures.
automatically play.
Visual Testing Checklist
Visual Testing Process
• All text is at least 12 pixels (or 9 point) in size,
The visual testing process requires using a color
ideally 16 pixels (or 12 point).
contrast checker and CVD simulator tools. I use the
• Small text and its background colors meets a two tools I demonstrate here in my own workflow, but
minimum contrast ratio of 4.5:1. “Small text” is there are many other tools that you might find better
defined as text smaller than 24 pixels (or 18 point) fit your style, operating system, and workflow (see the
or as bold text smaller than 18.5 pixels (or 14 list at the end of this volume for more tools).
point).
Let’s begin with testing color contrast. First, open the
• The contrast ratio of shapes, icons, and large TPGi Colour Contrast Analyser and select the eye-
text relative to their background color meets a dropper tool in the “Foreground colour” section of the
minimum ratio of 3:1. window, then sample the darkest color of the chart
title text. If you know the hexadecimal color code or
• Color alone does not denote meaning—that
have a tool you can use to obtain it, you can also enter
is, contrast, markers, or patterns are used to
that code directly. Then, select the eye-dropper tool in
differentiate data and are labeled appropriately
the “Background colour” section of the window, and
(i.e., with a legend or nearby text).
sample the background behind the title text.
• Text font is sans serif (that is, the letterforms
in the font do not have decorative marks or

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 6 5
 Next, we’ll test for issues that may affect those with
CVD.

Open the Color Oracle app (the icons will appear in

your computer’s taskbar). Click on the Color Oracle
icon (or right-click in Windows) and choose to
simulate Deuteranopia (commonly known as “red-
green colorblindness”) followed by Grayscale. For our
example chart, there is very little difference in the
shades of gray. This is a contrast issue: readers with
CVD may not be able to tell the difference between
different data series on the chart (including the
legend).

Once you have set the foreground and background

colours, the “Sample preview” section will show you
how those colours look together on text and on an
icon. And the “WCAG 2.1 results” section displays the
contrast ratio in a box in the top-right corner. For our
example, the contrast ratio is 4.6:1, which means
people with low vision can likely see this text color on
a white background. For general accessibility testing,
you can ignore any failures in the middle row (1.4.6
Contrast Enhanced AAA)—most audits only check for
AA compliance. Repeat this process for all text
in the chart. We can also cross-check this contrast issue using
Colour Contrast Analyser. The results confirm a
contrast ratio of 1.1:1, which explains the result from
the grayscale simulation.

So where do we stand with our visual testing?

• Passes

¡ Font is sans-serif.

¡ All text is at least 12 pixels or 9 point in

size, ideally 16 pixels or 12 points.

¡ The contrast ratio of shapes, icons, and

large text relative to their background
meets a minimum 3:1.

66 D O N O H A R M G U I D E
 Visual Testing Fixes
To resolve these issues, we can darken and enlarge
the title and summary text slightly, and we can choose
new colors for the arrivals and departures data series
that have at least 3:1 contrast between each other, as
well as both having 3:1 contrast against the
white background.

Using Color
It is very difficult to find a color set where
all colors have a contrast ratio of 3:1, even
for a chart with only two categories or
series of data.

My recommendation is to choose a
monochrome set with as much contrast
• Failures between colours as possible. Perhaps you
can find a color set that accounts for CVD
¡ Small text meets a minimum contrast ratio
and grayscale printing (you could also
of 4.5:1. “Small text” is text smaller than 24
consider 3D printing of tactile charts). This
pixels or 18 point, or bold text smaller than
contrast might be as low as 1.3:1. You might
18.5 pixels or 14 point. The chart summary
use spacing, position, labels, or interactive
does not meet minimum contrast.
styles and tooltips as other ways to know
¡ Color alone is not used to denote meaning. what data belongs to which category.
The chart uses color to differentiate
Although patterns are widely recommended
between Arrivals and Departures.
as a way to provide visual contrast, patterns
• Extra consideration should be used with care because they can
¡ The chart is able to be zoomed or actually make the chart less accessible, since
magnified. Check that the parent patterns can be visually confusing for some
webpage hasn’t disabled zoom. readers. For more information, see “Patterns
and Contrast,” HighCharts, accessed October
¡ If the chart has a transparent background, 24, 2022, https://www.highcharts.com/docs/
it meets the above contrast requirements accessibility/patterns-and-contrast.
in high contrast (forced styles) mode.
Not applicable.

¡ If the chart is animated, it must not

contain flashing that could cause seizures.
Not applicable.

¡ If the chart is animated, it must be able to

be paused or stopped and the animation
should not auto-play. Not applicable.

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 67
Nonvisual Testing readers will read out the filename of the image (in
For a static image chart, a text description must be this case, “chart-1-after-visual-fix.png”), which is a
provided (also known as alternative text or alt text). frustrating experience.
For web developers, your <img> tag must include the
short description on an “alt” attribute. If the short
description does not adequately explain the chart, a
longer text description should be present in the article
content, ideally directly before or after the chart.
You can learn more about alt text and strategies in
Chapters 4, 5, and 6 of this volume.

Nonvisual Testing Checklist

• There is an appropriate text description
of the chart.

Nonvisual Testing Process

Usually, we can check a nonvisual description of an
image by testing it with a screen reader. If you are a
screen reader user, you already know how to test for
alt text. Again, I recommend that everyone learn how
to use a screen reader to help test your own work
for accessibility.

But there is another way to test online images for alt

text without using a screen reader, using the built-in
debugging tools in the browser. Simply right-click on
the graph and select the Inspect option at the bottom
The correct HTML would include an alt attribute in the
of the menu (I’m using Chrome here; your options may
<img> element, like so:
vary slightly). If you are reading the document version
of this article, you can try this yourself by visiting this <img src=“/images/chart-1-after-visual-
chapter’s companion website. This companion website fix.png” alt=“A column chart on interstate
migration in Australia, year ending June 2020,
provides the text of this chapter in HTML and includes where Queensland had the highest net gain from
accessible, interactive charts. interstate migration of 25,300 people. The
chart shows arrivals and departures for the
For our chart, you will find the following line of HTML eight states and territories of Australia.”>
in the Elements tab of the Developer Tools panel:
The screen reader will read this bit of text to the user
<img src=“/images/chart-1-after-visual-fix. so they know what the graph is and what it represents.
png”>
The hardest part of this process is learning how to
write a good image description for a graph—Chapters 4
This line of code conveys to a screen reader user that
and 5 in this volume go into more detail on how to
an image is on the page, but it does not explain what
write better alt text.
the image is, what it is showing, or what it represents.
Without the presence of an alt attribute, most screen

68 D O N O H A R M G U I D E
 Before visual testing After visual testing

Nonvisual Testing Results Moseng, and their team, Highcharts prioritizes

Where do we stand on our nonvisual testing results? accessibility in their charts.

• Passes Let’s continue our accessibility testing. First, we’ll

test accessibility access with a keyboard, then
¡ There is an appropriate text description of
conduct additional tests for content, visual, and
the chart. Because this essay was built with
nonvisual elements.
accessibility in mind, all chart images have
been given text descriptions, except for the
Interaction Testing (Interactive Charts)
test image above.
If you are a sighted mouse user, you will be able to
Interaction Testing hover over the columns in the example chart and an
Although we’ve been using a static example chart so informational tooltip will appear. Most interactive
far, what if we made it interactive by adding tooltips charts on the web will have this feature, though they
to each bar? To test the interactive version, we tend to only show tooltips when a user uses a mouse
would need to do some additional tests for the three to hover over the bar. The needs of keyboard-only and
categories we’ve already covered. This takes us into touch users are generally neglected.
the second part of our accessibility testing: What to do
Interaction testing ensures that anything that can be
if the chart is interactive.
accessed by mouse hover is also available to those
using a keyboard or touch device.
Part 2: Testing an Interactive Chart
If you are reading the document version of this article, Interaction Testing (Interactive Charts)
please visit this chapter’s companion website to • Keyboard tab to the chart focuses on the first
conduct the tests described in this section. interactive element.

Interactive charts are generally used for larger sets of • The Tab key should navigate to different sections
data and allow the user to explore and form insights of the chart—such as the data series, legend,
about the data. The charts also necessitate some and menu—rather than between every single
added complexity when creating equitable experiences interactive element.
between sighted users and blind users or between
¡ Arrow keys should navigate between data
mouse users and keyboard-only users.
points or toggle between data series,
Based on the image-only chart from part one, I’ve legend items, and menu options.
created an interactive chart using the popular chart
¡ Space/Enter should activate buttons
and data visualization framework Highcharts.[19]
or toggles.
Thanks to the fantastic work of Ted Gies, Øystein

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 6 9
 • Mouse hover, pressing Space or Enter, or touch If you get stuck in any part of the chart and cannot
on a mobile device shows or hides annotations use the Tab, Shift-Tab, or Esc keys to exit, you’re
such as tooltips. in a keyboard trap. Such traps lead to frustrating
experiences for keyboard-only users, because the
• The chart does not have “keyboard traps,”
users will not be able to reach the interactive items on
something that occurs when a user can get into,
the rest of the page.
but not out of, a component or element of a web
page when using a keyboard. Lastly, if there are any custom keyboard shortcuts
that are essential to the operation of the chart, screen
• The chart does not rely on custom
readers probably cannot use them because the screen
keyboard shortcuts.
reader takes precedence when it comes to keyboard
This checklist does not cover accessibility testing of shortcuts (of which there are many), meaning many
dropdown menus, select boxes, or other components keystrokes will not make it to the browser.[20]
that the chart may contain, but they absolutely need to
also be tested with keyboards and screen readers. Content Testing (Interactive Charts)
Interaction Testing Process In addition to the content tests from Content Testing
Using only the keyboard, use Tab key and arrow for image charts, interactive charts must also ensure
keys to check whether you can reach all parts of the the following:
chart. Make sure Tab isn’t used to navigate between • Tooltips contain clear information
individual data points, because that creates a tedious
This process is similar to testing a static image chart;
experience for keyboard-only users, particularly when
fix the content first, because returning to the content
the dataset is large.
later could lead to drastic changes in the way the chart
Ensure that buttons or toggles can be activated by is presented.
pressing Space or Enter. All tooltips that appear on
Our interactive chart only adds tooltips. In the
mouse hover should also appear on keyboard focus.
tooltip, we should include the data series label, the
Check chart interactivity on a touchscreen device
x-value, and the y-value, because people who use
to ensure that using tap input also toggles
magnification may not be able to see the tooltip and
tooltips correctly.

70 D O N O H A R M G U I D E
the chart axes at the same time. Having all of the To test the chart with forced styles, either turn on
information can also benefit screen reader users as High-Contrast Mode in Windows, or open Firefox (on
they explore the chart. either Windows or Mac computers) and use the Dark
Background and Light Text add-on.
Highcharts’ default tooltip includes the x-value “Vic.”
(for Victoria), the data series label “Arrivals,” and the
y-value “77,197.”

Visual Testing (Interactive Charts)

In addition to the visual tests for image charts, we
With High-Contrast Mode enabled, your system
must also consider the following:
overrides application and website colors with a set of
• Active elements have clear focus styles that meet chosen “high-contrast” colors, which helps people with
a contrast minimum of 3:1. low vision who cannot easily differentiate between
• The chart can be understood in high-contrast colors. In our example, all chart colors have been
(forced styles) mode. overridden with a bright yellow on a black background,
which can cause problems because we can no longer
• If the chart uses animation, the chart respects
differentiate between the arrivals and departure
the user’s system animation setting. For longer
columns (except to hope that the legend lists them in
animations, the graph must contain a stop/start
the corresponding order). Luckily, the reader can still
button and must not automatically play.
use tooltips or toggle on/off of each data series in
While testing interaction with the keyboard, you can order to know which data points are arrivals and which
check that focus outlines (or other suitable focus are departures.
styles) appear on the interactive element. In the
To test animation, we need to activate the Reduced
example below, the dark blue outline around the first
Motion setting and return to the chart to visually
light blue bar indicates the current location of
check whether any animation occurs. On page
keyboard focus. The user should also be able to use
refresh, the columns grow vertically from the x-axis
the Tab and arrow keys to navigate the chart.
line in our example chart, and toggling the data on
and off prompts some animation. Unfortunately, this
interactive chart fails to respect a user’s reduced
motion preferences.

Nonvisual Testing (Interactive Charts)

Screen reader interaction with an interactive chart is a
complex test because the way a screen reader user will
navigate the chart depends on how it has been coded.
As mentioned in Chapters 5 and 6, most complex or
dynamic charts are coded in an SVG format, but that is
not a universal rule.[21]

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 71
If built with screen reader users in mind, the individual • Interactive elements on the chart have the
elements of the chart will be accessible by a screen appropriate ARIA roles and labels.
reader through appropriate ARIA roles and labels. • Visual changes to the chart are announced
In this specific example, each column in the interactive by an <aria-live> element or <role=“status”>,
chart (we’re using the HighCharts JavaScript library) for example whether a data series is toggled
has role=“img”, and an ARIA label with the datapoint on or off.
information. Screen readers will list each column as a
labelled image, allowing users to inspect each one. Nonvisual Testing Process
Inspecting the Document Object Model
HighCharts is one of the few chart libraries that
The Document Object Model defines the logical
have this level of screen reader support—most
structure of a document—for example, a web page—
of the popular chart tools do not even include
and enables programmers to add, modify, or delete
keyboard navigation. Apart from a lack of awareness
elements and contents from the page. We can explore
of accessibility in the software industry, very few
the Document Object Model directly on a web page by
resources exist on recommended techniques for
right-clicking and selecting the Inspect option, which
screen reader experience of charts (except for articles
will enable us to see whether the chart element is
like those found in Chapters 4, 5, and 6).
using <svg> or <canvas>.
Nonvisual Testing Checklist
• A chart heading is provided so screen reader users If you are familiar with the accessibility tree—a list of
can quickly skip to the chart. the accessibility properties on a web page—you can
also see the semantic structure of the chart by
• The anatomy of the chart is provided, including
inspecting the accessibility properties of each element
how many data points it contains.
in the chart or by enabling the full-page accessibility
• If necessary, interaction instructions are provided tree in the Google Chrome browser.[22] I’ve provided
(for example, toggling data series on or off). an example above.

72 D O N O H A R M G U I D E
Testing with a screen reader new to accessibility, conducting these tests could
Next, open up your screen reader and navigate take anywhere from a few minutes to several hours,
around.[23] depending on the visualization. In the end, this
process will save you time and help you and your
For VoiceOver: Use Control + Option + Right Arrow
team design visualizations that are accessible for a
and Control + Option + Left Arrow to navigate the
broader audience.
chart by. You can jump to the chart heading first, by
pressing Control + Option + Command + H until you I cannot stress enough the importance of usability
reach it, before using Control + Option + Arrow Keys testing for accessibility, which should include a diverse
to navigate between items. range of participants. Even the most experienced
auditors cannot predict the way assistive technology
For NVDA: Press Tab to navigate to the next
users and users with various disabilities will interact
interactive element. Press H to jump to headings on
with a visualization. Two people with similar disabilities
the page, and use the Down Arrow to navigate to the
and assistive devices can have different ways of using
next item. Press G (for “graphic”) to navigate to the
their technology. You cannot make assumptions when
next image.
designing data visualizations. Working with people
Our example chart is quite screen reader accessible who have different kinds of disabilities will enable you
and passes all of our nonvisual testing criteria. to determine how they are using your website, what
Congratulations! needs they have, and how you can ultimately create a
If you’ve made it this far, thank you, and well better experience for everyone.
done! Especially if you are new to accessibility and Happy testing!
assistive technologies. My goal here is to make it
easy for data practitioners to test their charts and
visualizations. That being said, especially for someone

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 73
Appendix Visual Testing Checklist
The source dataset used for interstate arrivals ¨ All text is at least 12px (or 9pt) in size, ideally 16px
and departures comes from “Migration, Australia, (or 12pt).
2019–20 Financial Year” Australian Bureau of
¨ Small text and its background colors meets a
Statistics, accessed October 24, 2022, https://www. minimum contrast ratio of 4.5:1 (see explanation of
abs.gov.au/statistics/people/population/migration- contrast ratios in Color Contrast Checkers section,
australia/2019-20. above). “Small text” is defined as text smaller than
24px (or 18pt) or as bold text smaller than 18.5px
State Interstate arrivals Interstate departures
(or 14pt).
NSW 89,873 110,760
Vic. 77,197 74,954 ¨ The contrast ratio of shapes, icons, and large text
relative to their background color meets a minimum
Qld 101,789 76,441
of 3:1.
SA 23,726 25,886
WA 29,211 31,621 ¨ Color alone is not used to denote meaning – that
Tas. 12,962 11,749 is, contrast, markers, or patterns are also used to
NT 13,517 16,214 differentiate data and are labeled appropriately (i.e.,
with a legend, or nearby text).
ACT 20,394 21,044
¨ Text font is sans-serif (that is, the letterforms in the
Checklists: Practical Accessibility Testing for font do not have decorative marks or flourishes.
Data Visualizations Examples of sans-serif fonts include Arial, Courier,
Content Testing Checklist and Helvetica).
¨ Chart contains a descriptive title. ¨ The chart is able to be zoomed or magnified.
¨ Chart contains a suitable summary in the chart or in ¨ If the chart has a transparent background, it meets
the surrounding text. the above contrast requirements in high-contrast
¨ Chart uses plain language. (forced styles) mode.

¨ Chart axes are labeled clearly. ¨ If the chart is animated, it must not contain flashing
that could cause seizures.
¨ Chart series are labeled clearly.
¨ If the chart is animated, it must be able to be
¨ The numerical data is formatted clearly. paused/stopped, the animation should not
¨ If the chart can be used for analysis or forming automatically play.
one’s own insights and is not adequately described
If chart is interactive,
by the chart summary, then a raw data table or a
CSV download of the raw data is provided as ¨ Active elements have clear focus styles that meet a
an alternative. contrast minimum of 3:1.

If chart is interactive, ¨ The chart is able to be understood in high-contrast

(forced styles) mode.
• If present, tooltips contain clear information.
¨ If there is animation, the chart respects the
user’s system animation setting, and for longer
animations, it must contain a stop/start button and
not automatically play.

74 D O N O H A R M G U I D E
Nonvisual Testing Checklist Interaction Testing Checklist
¨ There is an appropriate text description If the chart is interactive,
of the chart.
¨ Keyboard tab to the chart focuses on the first
If the chart is interactive, interactive element.

¨ A chart heading is provided so that screen reader ¨ Tab key should navigate to different sections of
users can quickly skip to the chart using the the chart, such as the data series, legend, and
heading shortcut. menu, rather than between every single interactive
element.
¨ The anatomy of the chart is provided, including
how many data points it contains. ¡ Arrow keys should navigate between data
points or toggle between data series,
¨ If necessary, interaction instructions are provided
legend items, or menu options.
(for example, toggling data series on or off).
¡ Space/Enter should activate buttons or
¨ Interactive elements on the chart should have the
toggles.
appropriate ARIA roles and labels.
¨ Mouse hover, pressing Space or Enter, or touch on
¨ Visual changes to the chart are announced through
a mobile device shows or hides annotations such as
an <aria-live> element or <role=“status”>, for
tooltips, if present.
example whether a data series is toggled on or off.
¨ The chart does not have keyboard traps.
¨ The chart does not rely on custom
keyboard shortcuts.

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 75
Chapter Seven Notes

If you’re new to assistive technologies, please take a few minutes to watch these videos on browsing with assistive technology videos for
[1]

an introduction to how they are used to navigate the web. See Henny Swan, “Browsing with Assistive Technology Videos,” TetraLogical blog,
December 24, 2021, https://tetralogical.com/blog/2021/12/24/browsing-with-assistive-technology-videos/.
See Chapter 4 (section 405 in particular) of “2010 ADA Standards for Accessible Design,” ADA.gov, accessed October 21, 2022, https://
[2]

www.ada.gov/regs2010/2010ADAStandards/2010ADAstandards.htm#c4.
[3]
See the Web Content Accessibility Guidelines section at “W3C Accessibility Standards Overview,” W3.org, last updated June 29, 2022,
https://www.w3.org/WAI/standards-guidelines/#wcag2.
[4]
“WCAG 2.1 at a Glance,” W3.org, last updated June 5, 2018, https://www.w3.org/WAI/standards-guidelines/wcag/glance/.
See Chapter 2 of this volume as well as Frank Elavsky, Cynthia Bennett, and Dominik Moritz, “How Accessible Is My Visualization?
[5]

Evaluating Visualization Accessibility with Chartability,” Computer Graphics Forum 41, no. 3 (2022): 57–70.
[6]
See “The Chartability Workbook,” Github.io, accessed October 21, 2022, https://chartability.github.io/POUR-CAF/.
[7]
As a disclaimer, I am not a professional accessibility auditor. I’ve learned accessibility testing as a software engineer and designer while
collaborating and learning with the accessibility community. The software I’ve built using this testing process has produced relatively few
issues in professional accessibility audits. Using this testing process will not guarantee WCAG compliance, but it will produce more inclusive
data experiences.
[8]
See “Colour Contrast Analyser (CCA),” TPGi, accessed October 21, 2022, https://www.tpgi.com/color-contrast-checker/.
See “Change Color Contrast in Windows,” Microsoft Support, accessed October 21, 2022, https://support.microsoft.com/en-us/windows/
[9]

change-color-contrast-in-windows-fedc744c-90ac-69df-aed5-c8a90125e696#WindowsVersion=Windows_11
Mikhail Khvoinitsky, “Dark Background and Light Text,” FireFox Browser Add-Ons, last updated February 7, 2021, https://addons.mozilla.
[10]

org/en-US/firefox/addon/dark-background-light-text/.
[11]
See https://colororacle.org/.
Google Chrome Developers, “Screen Reader Basics: NVDA – A11ycasts #09,” Youtube, December 2, 2016, https://www.youtube.com/
[12]

watch?v=Jao3s_CwdRU.
“NVDA Keyboard Shortcuts,” Deque University, accessed October 24, 2021, https://dequeuniversity.com/screenreaders/nvda-keyboard-
[13]

shortcuts.
Google Chrome Developers, “Screen Reader Basics: Voiceover – A11ycasts #07,” Youtube, October 14, 2016, https://www.youtube.com/
[14]

watch?v=5R-6WvAihms.
“VoiceOver Keyboard Shortcuts on a Mac,” Deque University, accessed October 24, 2021, https://dequeuniversity.com/screenreaders/
[15]

voiceover-keyboard-shortcuts.
Choosing the correct chart format is important for helping your reader understand your message. A column chart is probably not the
[16]

best choice for the data we’re using, but it is an easy format to test. Good accessibility begins with design, and I highly recommend reading
the following two resources: Cole Nussbaumer Knaflic, Storytelling with Data (Hoboken, NJ: John Wiley & Sons, 2015), https://www.
storytellingwithdata.com/books, and Jonathan Schwabish, Better Data Visualizations (New York: Columbia University Press, 2021), https://
policyviz.com/books/ .
[17]
See https://hemingwayapp.com/
[18]
See also Schwabish, Better Data Visualizations.
[19]
See https://www.highcharts.com/
[20]
See Léonie Watson, “Time to Revisit Accesskey?” Tink.uk, April 29, 2015, https://tink.uk/time-to-revisit-accesskey/.
There is also a popular graphic display element in HTML called <canvas>. The HTML canvas allows a programmer to build visuals using
[21]

geometric elements such as circles and rectangles along with x and y coordinates. It allows developers to build charts using programmable
graphic elements and interactions (<canvas> is often used for web 3D graphics or web games). But the elements within a <canvas> are not
reachable by the screen reader, and it takes quite a lot of JavaScript knowledge to make it an equivalent experience. When I see a chart built
in <canvas>, I assume it is not accessible to screen reader users or keyboard-only users.
Accessibility Tree,” Mozilla Developer Network, last modified September 20, 2022, https://developer.mozilla.org/en-US/docs/Glossary/
[22]

Accessibility_tree.
Navigating the chart by screen reader is not the same as navigating the chart using the keyboard. You will not see the focus outline
[23]

nor the tooltips when navigating between data points. Screen readers use the “virtual cursor” to navigate the page. When screen reader
shortcuts are pressed, like the Down Arrow in NVDA, keyboard events are not sent to the browser (i.e., the browser doesn’t know you’ve
pressed the Down Arrow). This is a common misunderstanding for people who are new to using screen readers; see this comment by
Oysteinmoseng on “A11y: Highlight Problem When Using NVDA,” Highcharts Github repository, issue #15303, March 11, 2021, https://
github.com/highcharts/highcharts/issues/15303#issuecomment-796670885.

76 D O N O H A R M G U I D E
 Current data visualization trends rely heavily
CHAPTER EIGHT
on infographics to convey meaning, but
Infographic this method frequently creates unintended
Equity in PDF accessibility barriers. In my work as a PDF
remediator (meaning I make PDF documents
Documents: accessible), I have seen countless infographics
Designing with that are unapproachable or that contain
meaningless descriptions for people
Accessibility who rely on assistive technology or keyboard-
in Mind only interaction.
In my experience, content creators usually take an “accessibility
at the end” approach to design. They design first and then try to
figure out how to make that design accessible. This essay explores
DAX CASTRO different ideas for creating richer experiences for people who use
assistive technology such screen readers, text-to-speech software,
or text-to-braille devices to interpret data visualizations.

Not everyone perceives all inputs equally. We must take additional

steps to increase what I call infographic equity. Simply put,
infographic equity is the attempt to provide an equal experience
for all readers regardless of the methods they use to read or
interact with a visualization. Let’s start with a simple example.
Consider the alternative (alt) text in the sunburst diagram on the
following page.

We have an image of a complex sunburst diagram showing five

different property types. Each one has a numeric value attached to
it. Technically, alt text version one (“Investment Property Sunburst
Diagram”) would pass any accessibility checker, but it contains
almost no meaningful data. Version two has a single value and
explains the main takeaway the author intended by including the
chart. Again, this is technically compliant, but is it an equitable
experience given the other four missing data values?

The third version of alt text contains the full meaning of the chart
with all values and associations, including the author’s intent. But
what should you do when you have a bar chart with 50 data points
or a graphic with a complex story? There are several ways we can
create more accessible experiences.

This essay focuses on four main methods for presenting richer,

more meaningful visual content in PDF documents. In particular, I
focus on infographics, a broad term that describes how we present
data in a visual way to make complex information easier to

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 7 7
understand. Unlike singular data visualizations, such as When teams start designing with accessibility in mind
standalone charts and graphs, infographics incorporate from the beginning, there are more options to present
text and images together to convey a complex idea in a a single, meaningful user experience. Depending on
creative, easy-to-understand way.[1] Infographics may what stage you begin incorporating accessibility, you
take the form of printed, standalone, leave-behind can increase or limit your ability to employ accessible
documents; downloadable PDFs; or large image files. design by affecting your timeline or your attachment to
Some infographics tell stories, others present data in a current designs.
series of steps, and others simply present data for
Starting at the Concept Stage
users to explore and understand. Before we can learn
In addition to obvious considerations like choosing
how to create more meaningful experiences, we must
an accessible color palette (see Chapter 9), designing
understand that the point at which we consider
an interactive experience for accessibility starts
accessibility during the development phase is critical.
with the most important question of all: “What do I
want the user experience to be?” The answer to this
When You Start Matters Most
question affects every aspect of your design and
It is important to incorporate accessibility
implementation. Without answering this question,
considerations at the earliest stage possible. The stage
most developers find themselves at the end of the
at which we consider accessibility directly impacts
project with several accessibility barriers they had not
how long it will take to make the product accessible,
considered. And listening to an image description is
what approach we use to do so, and ultimately how
an interactive experience that should be considered.
usable and informative the content is. If we start late,
Mapping out the user experience will help identify
our goal of a single, equitable, accessible experience
how the information is presented and possible
for everyone often fails because “there’s not enough
options for the user to interact with it while absorbing
time” or “this has already been approved and we can’t
meaningful content.
change it.”

78 D O N O H A R M G U I D E
Other considerations should include the following: Now that we’ve established that the earlier we
consider accessibility in our designs, the better
1. Am I using color alone as a way to
they’ll be, let’s walk through some approaches,
understand content or interactions?
both basic and complex, for creating accessible
2. Am I providing keyboard-based navigation that visualizations and PDFs.
offers important information and context?

3. Does my presentation method meet The Basics

minimum contrast requirements? Several essays in this volume have discussed strategies
and tools to write sufficient alt text for graphs
4. Am I providing text alternatives for
and images. The Web Accessibility Initiative—an
image-based data visualizations?
international public-interest nonprofit organization
Considering accessibility in the concept stage allows working to develop standards for the web—has
the most freedom for change and has the least impact established a basic approach for providing text that
on schedule and development. describes nontext content such as images, charts, and
graphs.[2] Although the Web Accessibility Initiative
Starting at the Draft Stage
technique suggests supplying short, meaningful
If you are starting to consider accessibility once a
alternative descriptions, that approach can leave a
draft has already been developed, you still have time
substantial information gap between what a visual
to make more accessible design and implementation
reader can perceive and what is provided to people
choices. Color palettes can be reviewed. Text
who rely on alternative descriptions or formats. Even
alternatives and presentation methods can be
though the Web Accessibility Initiative does not
evaluated with assistive technology for barriers and
suggest a minimum or maximum length for alt text, the
meaningful information. But any changes may be
most common approach is two to three meaningful
harder to implement at this stage. Those who approve
sentences about the key features or important data.
the content may have already formed attachments to
But how can we present a richer user experience?
the draft colors and methods. The best way to shift
How can we relay more than overviews and summaries
sentiment at this stage is to provide solutions when
while providing an equitable user experience?
encountering barriers. In my career, I have experienced
overwhelmingly negative pushback when my Again we must ask ourselves the driving question
evaluations only surfaced accessibility failures without mentioned earlier: What is the expected user
also providing solutions. experience? This question drives every decision we
make. Do we want to enable users to explore every
Starting at the Final Stage
data point in a chart or graph? Do we want to explain
Even if you are starting at the end, there is still
relationships or tell stories?
hope for creating an accessible product. With many
visualizations, you can slightly darken colors to meet The environment of the presentation also matters.
contrast thresholds, adjust alternate descriptions In an HTML web page, we can use a variety of tools
to be more meaningful, and modify tags or tag-only to enable readers to interact with the visualization.
content to present a better user experience for those Image maps, JavaScript code, ARIA-described tags (see
using assistive technology. But taking these steps is Chapter 5), and long-description (“longdesc”) tags can
not always easy. Starting accessibility work after the all be placed along an image on a webpage. In a PDF
project is fully developed is like baking an apple spice document, we do not have access to the same HTML
cake for someone who doesn’t like apples and asking, tags, so we need to take different approaches.
“can’t you just take them out?”

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 79
 The Four Basic Approaches to
Accessibility Tools & Terms Richer Infographics
Some of the benefits of presenting complex In addition to alt text, the following four
nontext content in a PDF document approaches push the envelope for richer infographic
include the ability to use layers, content key presentations. I won’t show all of the steps to add or
metadata, alt text, actual text, and figure edit these features, but these techniques can be a great
tags. Another unique benefit is the ability to starting point for you and your team to consider when
maintain visual presentation while providing building more accessible content into your PDFs.
an alternative experience through assistive 1. Repurposing text labels for charts and graphs:
technology. Testing your approach with a Accessible bar charts, pie charts, and line graphs should
screen reader or other assistive technology include clear labels and data points for each meaningful
is key when applying any of these methods element in the series. If we keep these objects as
to verify the technique provides a good user selectable text, we can target these elements as
experience (see Chapters 6 and 7). headings inside the tags tree (indicated with blue arrows
• Figure tag: A structural marker given to a in the next image) and apply “actual text” to include the
nontext object that identifies it and holds repeating axis information along with the actual data
additional programmatic information about value as shown in the “actual text” field. This approach
location, content type, and other properties. allows the user to step through each data point at their
own pace. Giving the user control over how they review
• Content key: A property of the figure tag that
the data is far better than presenting them with a
holds descriptive text in accordance with PDF/
generalized alternative text description that cannot be
UA (Portable Document Format/Universal
paused for data-point review.
Accessibility) requirements. However, this value
is not currently being voiced by JAWS (Job
Access with Speech) or NVDA (NonVisual
Desktop Access), two of the major screen
reader tools currently available.
• Alt text: Alternative description that describes
the meaningful elements of a photo or graphic.
This text cannot be paused when being read. It
should be two to three meaningful sentences
and avoid excessive punctuation.
• Actual text: A one-to-one replacement for
images of text (e.g., “Sale.” for a photo of a
banner that says ‘SALE’). Alternatively, you can tag each bar as a figure and add
• Expansion text: Description metadata for alt text that includes the data point, axis labels, and any
defining acronyms or abbreviations. (e.g., trends or meaningful correlations visually present. You
“IAAP: International Association of can use the Content Panel in the PDF document to find
Accessibility Professionals”). each element and create a figure tag from each group.
Any axis labels can be repurposed as headings. The
• JAWS: A commercial screen reader used mainly main difference of this approach would be that a person
in professional environments. using a screen reader would hear “graphic” for each
• NVDA: A free screen reader used worldwide.

80 D O N O H A R M G U I D E
figure element before the alt text is read. Again, your apply appropriate alt text to each slice of the image to
approach is dictated by the question “What do I want describe the process or data values as needed.
the user experience to be?”
As the content creator, you will need to figure out how
2. Breaking up the pieces: If you are a graphic many separate thoughts are presented and ensure
designer, you should be familiar with the idea of that you have sliced your images into enough pieces
slicing. This is an older method of presenting large to tell the story. It is not critical that the visually
graphics in web pages by cutting the image into represented slices are perfectly limited to the elements
several pieces that load more quickly on the site. In in the description. For screen reader users, the story
a PDF document, you can use alt text to employ a being presented needs to represent the correct
similar approach by presenting a series of images that number of descriptions to tell the visual story. But
tell a sequential story. The basic approach is to start there is a balance to consider for those using assistive
the series by introducing the series of graphs to the technology who also have sight. You should slice your
reader. In the image below, the first piece of alt text images in a way that considers the user might try to
might say, “The following nine graphics illustrate the draw correlations between the slice and the associated
lifecycle of water. First, water evaporates from the text. Be as close to logical as possible given the
ocean heated by the sun’s rays.” The number of slices complexity of your graphic.
is dictated by the depiction of the graphic. Then we

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 81
3. Accessing Taggable or Live Content: This approach
is similar to how we selected the bars in the first
approach. If we keep our graphic vector based (e.g., in
Adobe Illustrator or Encapsulated PostScript file
formats) and taggable, we can tell stories through
these elements using a combination of imagery,
symbols, and text rather than using a single raster-
based graphic (e.g., JPEG and PNG). Keeping elements
separate and taggable allows us to create accessible
experiences in the source document when using
programs like Adobe InDesign or by tagging them
individually in the PDF. How you tell the story is The process of placing images on top of background
important so the user can step through the elements text allows the visual reader to have the experience
in a logical and meaningful way. This order will also that they are used to and allows assistive technology
determine the tag order. users to access structured, meaningful, accessible
descriptions. This layered approach is especially
useful for organizational charts that can be presented
with nested lists and headings to mimic the visual
presentation. With flow charts, for example, the text
equivalent can follow the same format.

If we evaluate the world map graphic on the following

page, we can see there are pin points all over the map,
making it essentially one big list. We could use the
accessible tagging approach (approach number three)
to tag the live content if the graphic were placed in
an Adobe Illustrator file. But if the graphic was a PNG
or JPG image file, then using layers might be our best
approach. We place a text-based list under (behind)
the map that is accessible to people using assistive
technology. This method is most easily implemented
when we have access to files where we can control
the flow of text. It is also possible to add this list using
Acrobat, but that process is much longer and requires
individually creating a series of List Item (<LI>) tags
and placing the text in each one.

Again, designing with accessibility in mind saves time

and presents a more informative user experience.
4. Using layers: One of the easiest ways to present a
text-based alternative experience is by using Adobe
Acrobat’s ability to layer content. This feature is
especially useful when we need to show things like
organizational charts, process trees, or other text-
heavy infographics.

82 D O N O H A R M G U I D E
Conclusion and our ability to reach more readers and users.
No matter which of the four solutions or combinations Meeting the basic guidelines of the Web Content
we use, the first question we must always ask of our Accessibility Guidelines creates compliance, but
graphic is “What is the expected user experience?” considering the user interaction pushes us closer to a
The answer will provide more clarity for the path more equitable user experience for all. Our expected
that is most appropriate for your situation and your outcome dictates our approach. Understanding what
content. The development of accessible infographics we expect the user experience to be molds every
hinges on the premise of designing with accessibility decision we make from that point forward. I am a
in mind. The accessibility skill level of the remediator firm believer that infographic equity can be achieved.
must also be considered. Each approach has time and Accessibility does not have to be ugly, and we can
skill considerations that can affect your project. The create a good user experience with a little planning.
sooner you consider accessibility solutions, the better First, we just need the answer to the ultimate
prepared you will be to implement your approach and question, “What do I want the user experience to be?”
test the outcome against your desired experience.

“Accessibility at the end”—where accessibility features

are tacked on at the end of the project rather than
throughout the entire workflow—limits our creativity

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 8 3
Chapter Eight Notes
[1]
Matthew Pritchard, “Data Visualization vs. Infographics,” Infographics, Killer Visual Strategies News & Updates, Visual Communication
(blog), December 1, 2016, https://killervisualstrategies.com/blog/data-visualization-versus-infographics.html.
[2]
“Tips and Tricks,” World Wide Web Consortium Web Accessibility Initiative, last updated April 12, 2017, https://www.w3.org/WAI/
tutorials/images/tips

84 D O N O H A R M G U I D E
PART FIVE
Accessibility in Teams
and Organizations
 Data visualization style guides offer the
CHAPTER NINE
potential to build accessibility best practices
Building into organizational workflows and culture.
Accessibility Organizations, their designers, and their
content teams often rely on style guides to
Best Practices maintain brand consistency in terms of color, font,
Into Your feel, and visual style, but style guides are more
than just guidelines. They can set organizational
Organization’s standards and function as tools for organizational
Data Visualization process change.

Style Guidelines Although design style guides have typically focused on the
traditional aspects of a brand’s visual style, I and others have
argued that these guides should be extended to include rules
for data visualization as well, with a particular focus on
accessible visualizations.
AMY CESAL Because style guides can establish standards for the content an
organization produces, they provide a powerful opportunity to
incorporate accessibility standards from the ground up. Including
a topic within a style guide signals importance and organizational
commitment. Because data visualization style guides detail standards
and practices for every aspect of a visualization, such as colors,
fonts, visual encodings, and branding, these standards can ensure
production visuals meet the highest standards of accessibility.

In previous work,[1] I defined data visualization style guides

as “standards for formatting and designing representations of
information, like charts, graphs, tables, and diagrams. They include
what (e.g., types of charts) and why (e.g., reasons for using specific
colors).” Although style guides are distinct from templates, it is often
common (and helpful) for organizations to produce templates for the
tools they use to accompany the style guide (such as Excel, R, D3.js,
or Tableau). These templates can show how to create charts that
meet the standards set out in the guide and make it easy for people
to apply the standards.

Data visualization style guides should be designed to fit within an

organization’s larger design system. Style guides maintain uniformity
across the different tools and software that produce charts. An
organization’s charts should be consistent across tools and look
visually similar to the publications they are part of. Having a style
guide with principles and components that work across multiple

86 D O N O H A R M G U I D E
tools—rather than just one template for one tool— foreground and highlight colors and the chart
helps achieve this consistency. Consistency builds background color. Colors within a palette should also
trust and ensures minimum quality standards are met. be visually distinguishable from each other; this is a
particular challenge when an organization has a large
From an accessibility standpoint, creating a data
color palette.
visualization style guide allows an organization to
codify best practices into their data visualization The contrast ratio between foreground chart colors
design and production workflow. Accessible design and the chart background should be measured
considerations should be built into every aspect of according to the Graphical Objects and User Interface
the style guide, including color selection, typography, Components standard from the Web Content
line thickness, and the use of white space. It is also Accessibility Guidelines and can be tested using a tool
appropriate for style guides to have a section devoted such as WebAIM’s Contrast Checker tool. This tool
to additional accessibility measures beyond just visual includes values for compliance based on guidelines
aspects. This section can educate team members defined by the Web Content Accessibility Guidelines,
about the importance of accessible design and the an international group responsible for setting
ubiquity of users who benefit from accessible design, guidelines for the web (see also the appendix to this
and it can provide tools such as alternative (alt) text volume for a list of similar tools). Color blindness
and Accessible Rich Internet Application (ARIA) labels checkers like the Coblis Color Blindness Simulator can
to make designs work better with screen readers and be used to test whether colors within a palette are too
other assistive devices. similar for someone with color blindness. Larene Le
Gassick discusses a variety of other tools in Chapter 7,
Accessible Design Best Practices and others are listed in the appendix at the end of
Data visualization style guides commonly include this volume.
sections devoted to different aesthetics, like color or
Some colors have strongly associated social
typography. In each of these, accessibility should be
meanings developed over repeated use. In US
considered and enumerated for team members as they
politics, blue is strongly associated with Democrats,
build and style their graphs, charts, and diagrams.
and red with Republicans. Green means “go,”
Color yellow means “caution,” and red means “stop” or
Often when we talk about accessibility and color, we “warning.” Style guide color selection should be
talk about color blindness, particularly deuteranopia, conscious of, and work with rather than against,
also known as red-green color blindness, a condition these associations. Using colors in a manner
experienced by about 8 percent of men and inconsistent with existing associations increases the
about 5 percent of women of northern European cognitive load on the viewer.
ancestry.[2] The focus on color blindness to the Practitioners should either not use color pairings
exclusion of other color accessibility considerations or palettes that have particularly strong preexisting
mirrors our collective tendency to pay the most associations or should use these colors in alignment
attention to problems that affect (usually white) men. with users’ expectations. At the same time, some
Although designing to accommodate color blind users existing color associations (e.g., blue for boys and pink
is certainly important, we can do more. for girls) may be problematic because they reinforce
About 6 percent of the US population has some sort of existing stereotypes, so practitioners should be
vision impairment. Thus, we should also consider the cautious about their usage.[6]
needs of users with low vision, and we can do so
by ensuring there is enough contrast between

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 87
On the next page is a brand-consistent color palette
I created for the Sunlight Foundation that includes
consistent categorical colors for data we frequently
visualized (e.g., spending and political party), which
played into existing associations.

When choosing brand-consistent palettes for a

style guide, designers attempt to optimize for brand
recognition, visual distinctiveness, color vision
deficiency friendliness, number of colors, contrast, and
any potential implied or associated meanings of colors.
But one set of colors may not be capable of balancing
all those considerations and achieving all those aims.
Instead, a set of palettes within a style guide should
represent compromises across these considerations
to meet the organization’s needs and the needs
of their users. Some palettes might be better than
others for achieving certain aims, and organizations
can have several approved options for designers to
choose from depending on the application. A detailed
guide to colors in data visualization style guides by
Lisa Charlotte Muth goes into further examples from
organizations.[6]

For some users, color will always pose a problem

even when we do our best to find accessible palettes.
Given the constraints that color presents, we should Similarly, a chart with multiple abutting colors,
consider how much we really want to ask colors to do such as a stacked bar chart, can be difficult for a
in our charts. Often it can be helpful to “dual encode” vision-impaired user to process (see top of page 90).
our data—that is, combine color and another shape Separating each of these color sections with a white
or texture to communicate the data. In a scatterplot, stroke is an easy way to provide visual distinctiveness
points can be colored by a categorical variable and between sections, increasing contrast and accessibility.
have their shapes determined by that variable. Dual
encoding this way always increases accessibility and Labeling and Typography
makes a chart more readable to a wider audience. The
When writing the text for a chart, we need to consider
image on the following page, again from the Sunlight
what we say and how we say it. The style guide
Foundation, provides an example of dual encoding in a
specifies how headings, subheadings, axis labels,
scatterplot.
and legends should look and be written. Using plain
In line charts, instead of dual encoding, we use language goes a long way toward ensuring that the
direct labeling. Whenever possible, directly label a broadest possible audience can understand a chart—
chart’s lines, points of interest, or bars. This feature the Plain Writing Act of 2010 defines plain language
tends to be more accessible and requires less work as “writing that is clear, concise, well-organized, and
from a reader than a chart legend, which requires the follows other best practices appropriate to the subject
user to look back and forth between the legend and or field and intended audience.”[8]
the chart area.

88 D O N O H A R M G U I D E
 Data Colors

Main Colors
a thing a different thing another different thing another different thing neutral thing No Data
CMYK: 12, 24, 100, 0 CMYK: 7, 57, 97, 1 CMYK: 86, 35, 46, 10 CMYK: 48, 61, 28, 4 CMYK: 42, 38, 49, 4 CMYK: 9, 8, 8, 0
RGB: 227, 186, 34 RGB: 230, 132, 42 RGB: 19, 123, 128 RGB: 142, 109, 138 RGB: 151, 143, 128 RGB: 229, 226, 224
Hex: #E3BA22 Hex: #E6842A Hex: #137B80 Hex: #8E6C8A Hex: #978F80 Hex: #E5E2E0

a subset of the thing a subset of the different thing a subset of the other different thing a subset of the other different thing a subset of the neutral thing
CMYK: 6, 9, 78, 0 CMYK: 2, 31, 76, 0 CMYK: 70, 17, 28, 0 CMYK: 31, 42, 18, 0 CMYK: 25, 22, 32, 0
RGB: 242, 218, 87 RGB: 246, 182, 86 RGB: 66, 165, 179 RGB: 179, 150, 173 RGB: 193, 186, 169
Hex: #F2DA57 Hex: #F6B656 Hex: #42A5B3 Hex: #B396AD Hex: #C1BAA9

a subset of the thing a subset of the different thing a subset of the other different thing a subset of the other different thing a subset of the neutral thing
RGB: 189, 143, 34 RGB: 186, 95, 6 RGB: 0, 93, 110 RGB: 104, 70, 100 RGB: 124, 113, 94
Hex: #BD8F22 Hex: #BA5F06 Hex: #005D6E Hex: #684664 Hex: #7C715E

Specialty Colors
Republican Democrat Independent Con Pro Money
CMYK: 27, 84, 96, 22 CMYK: 89, 52, 27, 6 CMYK: 58, 34, 73, 13 CMYK: 18, 95, 98, 8 CMYK: 84, 24, 60, 5 CMYK: 67, 30, 100, 13
RGB: 154, 62, 37 RGB: 21, 107, 144 RGB: 112, 130, 89 RGB: 189, 45, 40 RGB: 15, 140, 121 RGB: 92, 129, 0
Hex: #9A3E25 Hex: #E6842A Hex: #708259 Hex: #BD2D28 Hex: #0F8C79 Hex: #5C8100

a subset of Republican a subset of Democrat a subset of independent a subset of Con a subset of Pro a subset of Money
CMYK: 25, 60, 69, 8 CMYK: 64, 38, 20, 1 CMYK: 44, 27, 57, 2 CMYK: 6, 79, 80, 1 CMYK: 58, 5, 45, 0 CMYK: 43, 12, 100, 0
RGB: 179, 112, 85 RGB: 104, 139, 171 RGB: 149, 161, 126 RGB: 226, 90, 66 RGB: 107, 187, 161 RGB: 160, 183, 0
Hex: #B37055 Hex: #688BAB Hex: #95A17E Hex: #E25A42 Hex: #6BBBA1 Hex: #A0B700

Scatter Plot (multi variable)

Source: Sunlight Foundation, “Data Visualization Style Guidelines,” accessed October 13, 2022, https://github.com/
amycesal/dataviz-style-guide/blob/master/Sunlight-StyleGuide-DataViz.pdf.

EXAMPLE
When to use a

» Shows the
Title of the chart variables fo
For explanatory text that’s not very long.
» Each point

» You can ch
6,000 Apples
FirstName
Oranges » Sometimes
LastName
FirstName Pear (regression
LastName
5,000 Papaya
Y Axis Title

Your data shoul

FirstName LastName
variable 1
Possible Key:
4,000 Fill: Background dark 7.560309668
Accent (#E5E2E0)
FirstName Line: Line Grey 8.569477057
LastName (#C0C0BB) 5.178854559

Change both color 5.044602676

0
Label 1 Label 2 Label 3 and shape if possible 7.629095533
(helps with sight
issues) 6.631379
X Axis Title
7.035723733
8.152163624
Source: www.fruitsperbushel.com

Source: Sunlight Foundation, “Data Visualization Style Guidelines,” accessed October 13, 2022, https://github.com/
amycesal/dataviz-style-guide/blob/master/Sunlight-StyleGuide-DataViz.pdf.

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 8 9
A data visualization style guide should provide and suggests there is not a universally accessible font.
guidance on how to use labels, titles, and legends Rather, font readability depends on the individual
effectively, and it should detail the most readable and the kind of disability they have. In this context,
fonts, sizes, and spacings. For maximum accessibility, I suggest choosing relatively simple and common
charts should include “takeaway titles”[9] that fonts and to use few font families in the same chart.
succinctly communicate the main takeaway of the Condensed fonts are often useful in data visualization
visualization. By telling viewers what you want them applications where space is limited, but their compact
to get out of a chart, you prepare them to view the nature can hinder vision-impaired users.
chart with that in mind, decreasing the cognitive load
In general, the most important considerations for
required to understand the data presented. Titles
text on charts are maximally informative content and
should be pitched to the level of the chart’s intended
appropriate spacing, size, and contrast. Rather than
audience, communicating findings in terms familiar to
leaving these selections to ad-hoc decisions made for
them. Subtitles or footers can be used to provide more
each individual chart design process, data visualization
technical details if necessary for accuracy.
style guides set up rules for functional and accessible
In terms of visual design, typography needs to be chart text.
large enough and have high enough contrast relative
to the background to serve low-vision populations. Layout and Style
For maximum legibility, the number of different fonts A style guide should include layout instructions that
used should be kept to a minimum—the chart should specify the spacing between chart area, legends,
be the focus rather than the fonts. Across charts, be titles, axis labels, footer, the organization’s logo,
consistent with fonts as well as the sizing of titles, and any other visual features that go on a typical
labels, and legends; this will maintain brand identity chart. Overcrowding can be a serious impediment to
and ensure all charts produced by an organization readability because charts that are cluttered are more
are readable. difficult for users with visual or cognitive impairments.
Unnecessary clutter increases cognitive load, and
Historically, sans-serif fonts (meaning letterforms
insufficient spacing between items may cause them
that do not have extending features at the ends) have
to bleed together when viewed by those with vision
been considered easier to read on computer screens
impairments. By prespecifying the spacing of elements
because of low screen resolutions. Now that high-
in a chart, every chart will be more consistent,
quality screens are more common, that thinking is less
readable, and accessible.
true. Current evidence on font readability is mixed

90 DO NO HARM GUIDE
Accessibility Section • If you can add HTML properties to the image,
Although accessibility should be built into the design add a long description[12] to more fully convey the
choices throughout the style guide, an accessibility- image’s meaning.
specific section should also be included. Here, you • Supplement your image with a link to the raw
can provide specific instructions on how to write alt data so curious readers can access the data in
text for data visualizations and how to include alt their preferred program.
text in whatever publication formats will be used for
• Keep alt text short. Alt text is read linearly by
distribution (see Chapters 4 and 8 of this volume
screen readers, which means that people can’t go
for strategies).
back a word if they miss something. For search
This section should also discuss the reasons that engine optimization purposes, Google cuts off its
accessibility is an important consideration. When crawl after a certain number of characters.
charts are made with accessibility in mind, they are
Alt text for data visualization can follow the
better and useful for everyone, not only for people
following format:
with disabilities.

Accessibility-Specific Additions
Thoughtful visual design with accessibility in mind
is a good start, but it is not enough on its own.
Additions need to be made to improve accessibility ARIA Labels
for screen readers. These additions also improve ARIA labels can be applied to interactive visualizations
general computer readability (including search engine to help users understand the data elements being
optimization, making your content more easily found displayed.
through web searches). WebAIM says, “WAI-ARIA (Accessible Rich Internet
Applications or ARIA) is a W3C [World Wide Web
Alt Text Consortium] specification for enhancing accessibility
Alt text provides a description of static-image charts in ways that plain HTML cannot. When used properly,
in digital mediums and is added as a tag on the image. ARIA can
Organizations should define how to add this tag for
• enhance accessibility of interactive controls, such
their content and what should be included in it to help
as tree menus, sliders, pop-ups, etc.,
people understand the content of the chart.
• define helpful landmarks for page structure,
WebAIM, a group housed at Utah State University,
explains that alt text allows the content and function • define dynamically-updated ‘live regions,’
of the image to be accessible to those with visual or • improve keyboard accessibility and interactivity,
certain cognitive disabilities. They also add that alt
text provides a semantic meaning and description to
• and much more.”[13]
images that can be read by search engines or be used For more information on how to properly use ARIA
to later determine the content of the image from the labels and apply them to data visualization, see
page context alone.[10] Chapter 5 of this volume.
As I have written for the Nightingale blog,[11]
Testing
• If an image contains meaningful information,
So far, I have mentioned and linked to several useful
adding alt text is better than not doing
testing tools, specifically for colorblindness and
anything at all.
contrast testing. When designing a style guide, all

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 91
palettes and templates should be pretested using Involving people from several parts of the organization
these tools so people don’t need to redo that work in the creation of a style guide can increase its
every time they make a chart. But another type of adoption. If people are involved in building it, they
testing, user testing, is the best step an organization will feel some ownership over it and champion it to
can take to make more effective and accessible charts. their departments. You will also get a larger variety
The more inclusive that user testing is, the better: user of perspectives and users, which will make the guide
testing with people with disabilities is a best practice more robust and inclusive. I recommend beginning
for building accessible charts. However, ensure a basic the data visualization style guide process with a series
level of accessibility is in place before engaging in user of informational interviews with chart creators and
testing—don’t present a product that is completely consumers throughout the organization to identify the
nonfunctional on screen readers to your screen- organizational needs the style guide will serve and to
reader testers and expect them to provide meaningful engage people across the organization in crafting a
feedback. product that makes their jobs easier.

By getting the charts in front of the intended users If the style guide is followed by much of the
before publication, you can see which aesthetics and organization, the charts and graphs created using it
mappings are confusing, which labels are ineffective, should be more accessible. Templates based on the
and which interactions are lost. More testing is better, best practices from the guide and available for several
but incorporating people with disabilities into the different applications the organization uses can help
building and testing process is best. Watching a user improve efficiency and adoption.
with a screen reader try (and probably fail) to paginate
across elements in your online, interactive chart will Training
tell you a lot about what you need to be doing better. Training can also increase style guide adoption, and it
Working with designers who are colorblind, are vision involves a two-pronged approach that reaches both
impaired, or use assistive technology will help ensure new and existing employees. When new employees
that you build the most accessible products you can. join the organization, they should be trained on
Many organizations and consultancies, such as Fable using the style guide and templates. If they learn to
or Knowability,[14] are equipped to help with this work. use these resources when they start, they are much
more likely do so consistently. From the beginning, an
Unfortunately, not all projects have the scope and
organization should emphasize accessibility and why it
budget to hire experts or pay user testers. But you
shouldn’t give up on user testing. Doing some testing is important.
is better than doing no testing, and the former can However, onboarding is often overwhelming, and
be as easy as asking a coworker or friend to give the company and style guide will evolve over time.[16]
your product a try. This process, having a handful of Offering ongoing advanced or refresher training on
users test something for a limited amount of time, is best practices allows people to stay current on the
sometimes called “guerilla testing.”[15] style guide or catch information at times when they
actually need it. Ongoing trainings also allow current
Adoption employees to stay in the know and to ask questions
A style guide is not useful if no one at the organization about how to apply the guide to specific use cases.
uses it. People have to know about it and find benefit The guide needs to work for them and provide a
from using it. If the style guide is seen as a burden and conversation rather than a mandate.
its value isn’t clear, it will be ignored and forgotten.

92 D O N O H A R M G U I D E
Persuade and Adapt Style guides are a critical first step toward
Some people will proactively seek out ways to use a maintaining this culture of continuous learning. As
data visualization style guide. These people should be data visualization professionals, it is imperative that
rewarded and highlighted as good examples. our work be accessible for all people, and having
consistent standards that include accessibility best
It is also helpful to look at where charts are not
practices can help us achieve those goals. Accessible
working or why creators are not using the templates
charts tend to be better charts. They are easier to
and style guide. Maybe they don’t know about them or
read for everyone—they have colors that stand out,
how to use them. Or maybe the guide doesn’t work for
communicate their meaning, and don’t confuse
them, which would suggest a need to tailor or adapt
readers. They are not too cluttered, the text is easily
its recommendations to fit their needs. Such cases
understood, and they don’t place undue cognitive
present an opportunity to expand the guide and define
burden on the readers. They can be read in multiple
a new use case to increase adoption.
ways, such as on a screen or with a screen reader.

Culture of Data Viz and Accessibility When we design accessibly, we design for broad
Creating a culture of talking about data visualization impact, so as many people as possible can engage with
and accessibility (together and separately) will increase our work. An effective style guide helps us front-load
awareness and knowledge in the organization. the design work and lets us set standards for how we
Creating conversations about current accessibility want to manage the trade-offs necessary to build the
practices will increase awareness and bring it to mind best, most accessible visualizations we can.
as a relevant topic for content creators. Sharing good
examples from inside and outside the organization can
further these conversations.

Both the accessibility and data visualization

communities are extremely active, with speakers
on this topic at events and conferences. The Data
Visualization Society has an annual conference,
Outlier, which includes talks on accessibility. The
society also has a calendar of events that includes
discussions of accessibility. Deque, a software
accessibility company, hosts an annual conference,
Axe-Con, which includes talks about data visualization.
Creating a culture where data visualization and
accessibility are topics discussed promotes continuous
learning and encourages people to keep up with
current standards.

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 9 3
Chapter Nine Notes

Amy Cesal, “What Are Data Visualization Style Guidelines?” Nightingale Journal of the Data Visualization Society (Medium blog), July 10,
[1]

2019, https://medium.com/nightingale/style-guidelines-92ebe166addc.
[2]
Bang Wong, “Color Blindness,” Nature Methods 8, no. 6 (2011): 441. https://www.nature.com/articles/nmeth.1618.pdf.
“Web Content Accessibility Guidelines (WCAG) 2.1,” W3.org, accessed October 13, 2022, https://www.w3.org/TR/WCAG21/. See also
[3]

“Understanding Success Criterion 1.4.11: Non-Text Contrast,” W3.org, accessed October 13, 2022, https://www.w3.org/WAI/WCAG21/
Understanding/non-text-contrast.html.
[4]
“Contrast Checker,” WebAIM, accessed October 13, 2022, https://webaim.org/resources/contrastchecker/.
“Coblis —Color Blindness Simulator,” Colblindor, accessed October 13, 2022, https://www.color-blindness.com/coblis-color-blindness-
[5]

simulator/.
Lisa Charlotte Muth, “An Alternative to Pink & Blue: Colors for Gender Data,” Datawrapper Blog, July 10, 2018, https://blog.datawrapper.
[6]

de/gendercolor/.
[7]
Lisa Charlotte Muth, “A Detailed Guide to Colors in Data Vis Style Guides,” Datawrapper Blog, March 30, 2022, https://blog.datawrapper.
de/colors-for-data-vis-style-guides/.
Plain Writing Act of 2010, Pub. L. 111 – 274, 124 Stat. 2861–63 (2010). https://www.govinfo.gov/app/details/PLAW-111publ274/
[8]

summary.
[9]
Cole Nussbaumer Knaflic, “So What?” Storytelling with Data blog, March 23, 2017, https://www.storytellingwithdata.com/
blog/2017/3/22/so-what.
[10]
“Alternative Text,” WebAIM, accessed October 13, 2022, https://webaim.org/techniques/alttext/.
Amy Cesal, “Writing Alt Text for Data Visualizations” Nightingale Journal of the Data Visualization Society (Medium blog), July 23, 2020,
[11]

https://medium.com/nightingale/writing-alt-text-for-data-visualization-2a218ef43f81.
“Complex Images — Long Descriptions,” W3.org, accessed October 13, 2022, https://www.w3.org/WAI/tutorials/images/complex/#long-
[12]

descriptions.
“Introduction to ARIA – Accessible Rich Internet Applications,” WebAIM, last updated June 30, 2020, https://webaim.org/techniques/
[13]

aria/.
“Accessibility Testers,” Fable, accessed October 13, 2022, https://makeitfable.com/testers/; “Usability Testing with People with
[14]

Disabilities,” Knowability, accessed October 13, 2022, https://knowbility.org/services/usability-testing.

Guy Ligertwood, “Guerilla Testing: Hallway Usability Tests for UX,” Adobe XD Ideas, April 15, 2020, https://xd.adobe.com/ideas/process/
[15]

user-testing/hallway-usability-test-guerrilla-testing/.
Ben Chartoff, “Urban Institute’s Data Visualization Style Guide: A Living Document,” Data@Urban (Urban Institute Medium blog), March
[16]

19, 2018, https://urban-institute.medium.com/urban-institutes-data-visualization-style-guide-a-living-document-b90710702a9f.

94 D O N O H A R M G U I D E
 As a new software developer in city government,
CHAPTER TEN
I was tasked with making the city’s public-facing
Nontechnical dashboards accessible. Up to that point, all
Barriers to Data the technical documentation I had needed as
an engineer had been easily discoverable in a
Visualization web search. So I was flummoxed to find almost
Accessibility in nothing about data visualization accessibility.

Government After weeks of reading blog posts, the “talk” sections of wikis, and
comments on coding forums, I hesitantly implemented automated
text labels and keyboard navigation patterns. I was never able to
secure funding to conduct usability research, nor was I successful
in any efforts to partner with local disability advocacy groups to
MELANIE MAZANEC formalize a government technology advisory council.

Although my work was experimental and incomplete, it helped

me connect with expert practitioners from whom I have learned a
great deal. Knowing how hard it had been for me to find resources,
I proactively shared new accessible data visualization guidance
that I learned about and volunteered implementation support
to colleagues in government technology. I assumed that people
drawn together by mission-driven work would be excited to make
democracy more inclusive and that the only thing holding them back
was a lack of information.

Unfortunately, I was wrong. Fellow tech workers consistently told me

that accessibility was an edge case that only affected a few people,
that it didn’t matter because dashboards weren’t public facing, that
the client hadn’t asked us to work on accessible data visualization,
or that we would address accessibility problems “after we are done
building the product.” Even though I had the information readily
available, that wasn’t enough to make people value, understand, or
apply it.

In retrospect, I should have known better. Despite the many web

accessibility resources and trainings available, most websites still
have easily remedied problems.[1] And although large employers like
governments, banks, and universities have accessibility mandates,
computer science programs and coding bootcamps consistently
fail to teach accessibility. It’s no wonder that a developer fresh out
of college rolled their eyes when I pointed out basic accessibility
problems in a code review.

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 9 5
Making information available about data visualization Design decisions that prevent people with disabilities
accessibility is a crucial first step. Connecting a from having equal access are ubiquitous in technology.
community of practitioners to build on one another’s The 2022 WebAIM Million report evaluated the
ideas is the next. To get government agencies to adopt top million websites using an automated test for
new practices, we need to also recognize and address compliance with the Web Content Accessibility
the nontechnical barriers that public servants and Guidelines, or WCAG. Errors were detected on 96.8
vendors face in implementation. percent of pages, with an average of 50.8 errors per
page.[2] -And, as demonstrated in 2017 by the Gov.UK
Why Work on Data Accessibility in Government? web team,[3] automated tests can only flag the types
Public infrastructure shapes our lives for better or for of issues that are easiest for engineers to find and
worse. The placement of an urban highway can cut off remedy, so there were likely many more errors present
a neighborhood from economic opportunity. A road than those found. The prevalence of automatically
widened to facilitate the flow of traffic may preclude detectable WCAG compliance errors indicates a much
kids from walking safely to school. Conversely, a deeper problem with the usability of the web.
reliable bus system allows people to drive less, leading The visual representation of information in charts,
to less congestion and demand for parking. And a wide graphs, and diagrams is one area where undetectable
enough sidewalk with adequate room for both people issues often arise: the use of red and green to
and trees can alleviate urban heat while still making distinguish categories in a stacked bar chart; a tooltip
room for strollers and wheelchairs. that is shown on mouse hover but is not operable by
Public infrastructure is not an inevitable natural keyboard; design software that requires hardware
landscape, but the result of design choices made by keyboard commands to operate but is incompatible
people. Human beliefs and biases influence whose with on-screen keyboards; or maps that use images
needs are prioritized and what kind of infrastructure and textures to convey information not otherwise
receives funding or support. People in power design available to people who are visually impaired or blind.
processes determining who can provide input or All of these issues can create inequitable experiences.
make decisions. Public meetings held during the
Although government is mandated to serve all people
day may exclude people with day jobs from showing
equitably, “the state is embedded in and enmeshed
support for city initiatives. Input processes that
with civil society, not apart from or above it.”[4] The
happen only in person could exclude people who are
software industry’s proliferation of visual tools with
immunocompromised. And state laws that require
accessibility problems cannot be separated from its
cities notify homeowners, but not renters, of public
impact on government. As bureaucracy is digitized,
meetings for proposed large-scale developments might
data are generated by each process and transaction.
amplify the voices of wealthier people.
Governments use tools built by private companies to
Modern public infrastructure includes more than collect, analyze, and visualize data. In turn, government
roads and buildings. Software has become an integral data analysts help monitor service performance,
part of the built environment and makes our lifestyles inform policy changes, and share information with the
possible. And just as urban designers shape wealth public. Programmers and analysts generate reports and
inequality, public safety, climate change, and mobility, build dashboards for elected officials, agency leaders,
software designers can create access or inequality city managers, and the general public. People whose
in the digital world. Biases and power dynamics access needs are not considered in data analysis and
influence every aspect of technology, such as who communication are excluded from these bureaucratic
may be encouraged to pursue an engineering career, and democratic processes.
which pitches receive funding, or which projects are
prioritized within a company.

96 D O N O H A R M G U I D E
Public administration scholars coined the term charts, let alone complex collaborative design
“administrative discretion” to describe the way interfaces. In cases where the visual is a static image
public workers unofficially shape policy through secondary to the rest of the content, a text alternative
implementation decisions, which can even be might be enough to offer a comparable experience (see
weaponized to advance political agendas.[5] Beyond Chapters 4 and 8 in this volume for some guidance).
elected officials and public workers, others who However, the proliferation of interactive dashboards,
wield power in government include nonprofits that maps, and other tools with visual interfaces make it
deliver public services or receive grant funding, and both necessary and possible to find novel ways to
private companies contracted to work on behalf of build inclusively.
government. It is necessary, then, to ensure these
Thanks to a robust community of thoughtful
means of exercising political power beyond elected
practitioners, finding examples and advice is now
representation are accessible too. Work toward
easier than ever. Individuals and organizations are
accessible data visualizations in government should
publishing code snippets, essays, and documentation
not be limited to public-facing dashboards and reports;
to help others build accessible data visualization. The
rather, it should include all tools used in governments
Data Visualization Society incorporated accessibility
and organizations that work with governments.
as a category on which a visualization can be judged in
For government to represent all the people it serves, their design contests. But the lack of formal standards
it must make the information and systems that still holds back progress on data visualization
facilitate participation in governance available to accessibility in government.
everyone. And for a government to generate inclusive
First, the ambiguity of WCAG’s applicability to data
public infrastructure, it must also use accessible
visualization leaves room for interpretation in an
digital infrastructure to support its operations and
environment where experimentation is frowned
decisionmaking processes.
upon. At the federal level, where Section 508 (see
the Section 508 box on the next page) incorporates
Implementation Barriers
WCAG by reference, should only keyboard-navigable
Although official guidance is lacking, many dashboard tools be used, or are text alternatives
informational resources created by data visualization acceptable? How should a topographical map, a
accessibility practitioners have begun to form a body Sankey diagram, or a scatterplot be described in text?
of knowledge that can support anyone looking for In local government, where WCAG is not mandated
technical advice. However, building for accessibility but the less-specific Americans with Disabilities Act
necessitates resources in the form of not just still applies, to what standards should vendors be
information but also support from colleagues, public held? In the context of government, where the quality
leaders, and private-sector partners. of technology is measured more by its track record
Ambiguity and a Lack of Standards for Accessibility of stability than by its future potential, workers and
The current version of WCAG covers some data vendors are likely to err on the conservative side and
visualization topics, including color, keyboard follow precedent. For data visualization, this reticence
interactivity, animation, and text alternatives to may mean providing a text alternative rather than
images. But the application of WCAG guidance is trying to follow new, informal data visualization advice.
ambiguous when it comes to even simple interactive

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 97
 Section 508 a government might ask for accessibility in such a
Section 508 of the Rehabilitation Act of vague way that any agreement is unenforceable. Or
1973 (later amended by additional laws) is requesting accessibility without referencing standards
one of several federal disability laws. Section may require so much prior knowledge of technical
508 requires federal agencies to “develop, implementation that doing so is not feasible for
procure, maintain, and use information nontechnical government workers.
and communications technology (ICT) that Referencing WCAG standards in Section 508 for the
is accessible to people with disabilities— federal government did not magically change culture,
regardless of whether or not they work for funding, or entrenched legacy software overnight. The
the federal government.”[6] This requirement (gargantuan, unfinished) project of improving federal
extends to websites, user guides for software web accessibility has taken this mandate, as well as
and tools, online training, webinars and a corps of digital services professionals motivated
teleconferencing, PDF documents, and more. by a shared dream of high-quality public services,
The requirements of Section 508 have and a generation of disability rights activists holding
been updated several times to better align government accountable. Neither can we expect data
with modern technology and international visualization standards to accomplish any miracles.
standards. Today, Section 508 incorporates But working a clearer mandate into existing digital
WCAG 2.0 by reference. Although these accessibility guidelines, especially for simpler cases,
guidelines do not apply to private-sector would give public employees a place to start.
businesses, the federal government must
ensure that it procures only 508-compliant
Limited Resources Are Subject to Power
software from the private sector. Dynamics and Diffusion of Responsibility
Even if clear standards for data visualization existed
Second, it takes more resources to start from scratch and were mandated by law, enforcing them would
than it does to start with standards. Even when still be a separate matter. Whose responsibility is it
starting from blog posts, research papers, and YouTube to ensure that government data visualizations are
videos about a topic, an individual visualization creator accessible, and what support might they have?
must put in hours of effort just to learn enough to Analysts
discern which advice to follow. In the absence of clear An individual government worker who wants to
consensus, they may end up reinventing the wheel and make their data visualization work accessible might
creating their own accessibility patterns, even though face limitations. Analysts may not have the training
established patterns have already begun to emerge or funding to learn how to create accessible data
across different visualization tools. Although following visualizations. Most government software users,
rules is never a replacement for usability research, including creators of documents, presentations, PDFs,
building on the experience of others can allow web content editors, and data visualizations, are not
developers to focus government’s exceedingly scarce trained in accessibility.
resources where they can make a larger impact.
Even those who are experts in data visualization
Lastly, standards allow governments to convey accessibility may still be stymied by the limitations
accessibility expectations to vendors. WCAG of the tools they are using. Most statistical software
compliance is a convenient shorthand to include in limits control over data presentation to minor choices
agreements with software companies. It is easy to like graph type, color, and axis labels (see, e.g., Chapter
look for on a website, ask about by email, or write into 5). If an analyst has the freedom to choose different
a contract. In the absence of standards to reference,

98 D O N O H A R M G U I D E
software, they may not have the time or capability have little understanding or patience for the behind-
to evaluate the comparative accessibility of different the-scenes work necessary to maintain high-quality
tools. And many analysts, especially in government, technical products. These limitations exist in and
are restricted in their choice of tools to whatever their outside of government.
predecessors chose (or whatever the organization
Many software companies employ user researchers
procured) long ago.
and designers to understand what end users need,
Analysts are also limited in their choice of tools by communicate these needs to engineers, and conduct
what is available from the private sector. Custom usability testing. Design and research are crucial
software is so time consuming and expensive that it is for building software that is not just compliant with
usually only justifiable for a highly specialized product accessibility and business requirements but also
that will serve many users, a product that will need usable. Unfortunately, design and research roles are
to be changed frequently, or small projects. For most still uncommon on government teams. Instead, many
products that are commercially available, including government systems are “designed” by an engineer
software for word processing, email, spreadsheets, who interprets business requirements from an agency
and statistics, a government or agency could never director. The system may be evaluated by domain
hire enough engineers to come close to Google or experts in government but never tested with the
Microsoft’s economy of scale. Instead, governments people who will have to use the system. An engineer
use the software products that technology companies in such an environment might not have the skills
choose to make. If private-sector companies do not or permission to engage members of the public in
make their products accessible, government workers usability research on their own. The result is systems
who use these tools in turn are restricted in their that make sense only to the people who build them.
accessibility efforts.
Managers
Engineers Individual public workers may not have the authority
Although most data visualizations in government to prioritize data visualization accessibility or have
are generated by statistical software procured from access to the tools or resources needed to create
the private sector, some are custom made by front- more accessible work. In these cases, people who hold
end software engineers. Because engineers have a positions of power may clear the path.
greater degree of control over the appearance and
Because most software is purchased and not built
functionality of their visualizations, they can more
in-house, the single most effective way to work
easily implement accessibility recommendations.
on data visualization in government is to procure
But having a greater degree of freedom in technical
accessible products. For off-the-shelf products that
choices does not always mean having more control
are not specific to government, accessibility may be
over one’s work environment.
a last priority, because private companies are not
Engineers whose tasks are set by a project manager held to any specific standard for digital accessibility.
may have very little say in prioritization. An engineer For specialized needs where a company might only
with autonomy in choosing day-to-day tasks may still serve government clients (e.g., a maker of permitting
be stuck in a “work order” paradigm within a siloed software), governments can only choose from few
IT department, where they receive full project plans alternatives. The same can be said of domains
and deadlines from another department with no where a few large companies dominate, like cloud
opportunity to collaboratively plan for what kind of infrastructure or spreadsheets. Finding an accessible
work a project requires. Finding support to learn product can be challenging or impossible.
about accessibility, write patterns, and conduct
usability research can be hard if the people in power

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 9 9
One might assume that custom software would be cybersecurity startup. He told me that they had
better because it is tailored to meet the client’s needs. many federal agencies as clients. Because I had
But building custom software comes with the huge previously worked on dashboards for a cybersecurity
risk of sinking large amounts of money, which cannot startup, I understood that most of the data
be recovered, into projects that are either never visualization work would be internally facing, to
delivered or poorly delivered. And regardless of how be used primarily by IT workers in government and
many options exist or how bad a custom system is, managers to monitor and respond to cybersecurity
the cost and time commitment required to switch incidents. I was still excited: using accessible internal
software systems is prohibitively high. A government tools in government can make it easier to hire people
may be stuck with a newly procured product riddled with disabilities into positions of power and thereby
with accessibility problems for years until they can build a representative bureaucracy.
afford to replace it. Vendors of off-the-shelf and
When it came time for me to ask questions, I asked
custom software hold a lot of power because of
how they approach building accessible dashboards.
these transaction costs associated with software
He said, “We don’t really worry about accessibility.
procurement.
Section 508 doesn’t apply to cybersecurity.” He
Vendors also hold power in relationships with seemed shocked when I told him I would not continue
governments because of information asymmetry. the interview process because I was disappointed
Many public managers do not have the knowledge or that they knowingly exclude people with disabilities
expertise to demand or enforce digital accessibility. from federal employment. I was shocked that he was
The silos and red tape of bureaucracy may keep shocked. What made him assume that no person with
them from collaborating with engineers and a disability would ever hold a job in government and
analysts to develop specific, actionable need to use his product?
requirements for contracts.
This cofounder is not alone in his beliefs that
Governments can exercise the power they do have. accessibility is only relevant for public-facing
A well-intentioned vendor may worry that data projects and does not extend to internal tools.
visualization accessibility or usability research for Most government technology companies do not
accessibility are beyond the scope of a contract, evaluate internal tools for accessibility, even if they
especially because data visualization accessibility have a social impact mission and push for inclusivity
requirements are not spelled out in WCAG, Section in the products they build for others. These companies
508, or the Americans with Disabilities Act. To address assume people with disabilities might be the recipients
some of these barriers, governments can specify data of services, but not colleagues or decisionmakers
visualization accessibility requirements in requests who will need to fully participate in design processes,
for proposals and contracts in addition to WCAG incident response, or project planning.
compliance, allocate time and funding in custom
These beliefs indicate unexamined ableist assumptions
software projects for accessibility usability research,
about who can or should hold power. When people
and ask vendors about how they work on accessibility
are separated into those “doing” and those “receiving,”
and whether internal tools and data visualization
existing disparities in representation in government
are included.
create a feedback loop of exclusion. Workers in
environments with accessibility barriers believe
Bias about Who Works, Holds Power,
they have no colleagues with disabilities and choose
and Makes Decisions
internal tools with accessibility problems. Internal tools
In spring 2022, I interviewed for a front-end become crucial parts of jobs and public processes.
development job with the cofounder of a People with disabilities are prevented from working

10 0 D O N O H A R M G U I D E
or participating in government and advocating for Public leaders, workers, and communities can
themselves from the inside. mitigate this potentially negative impact. For large
procurements, explicitly naming accessibility as
Conclusion a requirement for not only public-facing projects
Cultural and institutional factors can make it hard to but also internal tools can go a long way. Vendors
implement accessible data visualization practices in building custom software should also be required to
government. But an individual can still strive, within meet a standard of accessibility that goes beyond
the context of their role and skill set, to influence their mere compliance, toward usability and inclusion. To
organization for the better. handle smaller-value software acquisitions under the
procurement threshold where an individual public
It is no accident that tech industry tools and ways of
servant might exercise discretion, governments should
working are being imported into government. In the
evaluate and recommend accessible products in
past decade, several organizations and fellowships
advance for common needs.
(e.g., US Digital Service, US Digital Response, Office
18F in the General Services Administration, the But procuring accessible software will not be
Presidential Innovation Fellowship, Tech Congress, enough. Even tools built to be accessible can create
Code for America, and the Tech Talent Project) have documents, dashboards, and other work products
sprung up to recruit tech workers from Silicon Valley to with accessibility problems. Governments also need to
bring their experience to bear on our most challenging create accessibility policies and provide internal, job-
public problems. Amazon, Microsoft, Google, GitHub, specific training. Accessibility is the responsibility of
and other tech companies have eagerly onboarded everyone in an organization who uses digital tools.
customers and launched initiatives to digitize and The disability rights movement has been clear from the
modernize public services. Universities are scrambling start that people with disabilities should lead the way:
to rework their master of public administration “nothing about us without us” has been a common
programs to include more digital governance skills. mantra since the 1990s. Building inclusive public
Many of these efforts have created more reliable institutions that serve everyone equitably requires that
digital services, cleaner interfaces, and smoother our technical tools support people with disabilities
interactions with governments. But technological not just as end users, but as political leaders,
change, if not led by the public service values of decisionmakers, participants in public discourse, and
equity, democracy, participation, representation, and public workers in a representative bureaucracy.
transparency, can create a tangled knot of inaccessible
infrastructure that cannot be unbuilt. Unchecked
proliferation of inaccessible external and internal visual
tools in government decisionmaking processes will
perpetuate a cycle of exclusion.

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 101
Chapter Nine Notes
[1]
“The WebAIM Million Report,” WebAIM, last updated March 31, 2022, https://webaim.org/projects/million/.
[2]
“The WebAIM Million Report,” WebAIM, last updated March 31, 2022, https://webaim.org/projects/million/.
Mehmet Duran, “What We Found When We Tested Tools on the World’s Least-Accessible Webpage,” Accessibility in Government blog,
[3]

Gov.UK, February 24, 2017, https://accessibility.blog.gov.uk/2017/02/24/what-we-found-when-we-tested-tools-on-the-worlds-least-

accessible-webpage/.
Kelly Campbell Rawlings and Thomas Catlaw, “Democracy As a Way of Life,” in Government Is Us 2.0, ed. Cheryl Simrell King (New York:
[4]

Routledge, 2011), 31.

[5]
Pamela Herd and Donald P. Moynihan, Administrative Burden: Policymaking by Other Means (New York: Russell Sage Foundation, 2019).
[6]
“What Is Section 508?” EPA.gov, last updated January 18, 2022, https://www.epa.gov/accessibility/what-section-508.

10 2 D O N O H A R M G U I D E
Appendix: Accessibility Tools and Resources

This technical appendix provides curated lists of screen readers, color tools, accessibility remediation firms
and platforms, and other resources for accessibility guidelines. These lists are not comprehensive, and they are
likely to change as more tools are developed and published. The lists do not constitute an endorsement of any
particular tool or service. We hope these lists can help readers explore the tools available that will enable them
to create better, accessible data and data visualization products.

Accessibility Guidelines
Chartability. Developed by Frank Elavsky (see Chapter 2), Chartability is a set of testable questions that seek
to ensure data visualizations, systems, and interfaces are accessible. Chartability is organized into principles
with testable criteria and focused on creating an inclusive data experience for people with disabilities. https://
chartability.fizz.studio/

Section508.gov. Commonly referred to as simply “508 compliance,” Section 508 of the Rehabilitation Act of
1973 (29 U.S.C. § 794d), and amended by the Workforce Investment Act of 1998 (P.L. 105-220), requires federal
agencies to develop, procure, maintain, and use information and communications technology that is accessible
to people with disabilities. The US General Services Administration is the federal agency responsible for
providing technical assistance to other agencies to ensure Section 508 compliance requirements are correctly
put in place. https://www.section508.gov/

US Environmental Protection Agency. The EPA provides a succinct introduction to the guidelines and
requirements set forth under Section 508. https://www.epa.gov/accessibility/what-section-508

Web Content Accessibility Guidelines (WCAG). The Web Accessibility Initiative hosts the WCAG guidelines,
which explain how to make web content more accessible for people with disabilities. https://www.w3.org/WAI/
standards-guidelines/wcag/

Screen Readers
JAWS. The Job Access With Speech (JAWS) screen reader provides speech and Braille output for many major
computer programs including Microsoft Office, Google Docs, Chrome, Firefox, Edge, and more. JAWS only
works on Windows computers. A single license for an individual user is currently $95 a year. https://support.
freedomscientific.com/Products/Blindness/JAWS

Narrator. Narrator is a screen reader tool built into the Windows 11 operating system. It has some limitations
with some browser tools and web applications. https://support.microsoft.com/en-us/windows/complete-guide-
to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1

NVDA. NonVisual Desktop Access (NVDA) is a free and open-source screen reader that supports major software
programs and is often compared with JAWS. As with JAWS, NVDA works only on computers running the
Windows operating system. https://www.nvaccess.org/download/

VoiceOver on iOS. This screen reader is built into the iOS operating system on iPhones and iPads. https://
support.apple.com/guide/iphone/turn-on-and-practice-voiceover-iph3e2e415f/ios

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 103
VoiceOver on macOS. This screen reader is built into the Mac operating system. It has a steeper learning curve
than some of the other tools on this list, but it also has more than 30 languages available. https://www.apple.
com/voiceover/info/guide/_1121.html

TalkBack. The internal accessibility tool for Android users, the TalkBack screen reader speaks text and
image content on the screen. https://support.google.com/accessibility/android/topic/3529932?hl=en&ref_
topic=9078845

Emacspeak The Complete Audio Desktop. This is a free screen reader tool that works in the emacs editor on
Linux and OS X operating systems. Support is provided for interacting for many types of Internet media and is
used by programmers and researchers. https://github.com/tvraman/emacspeak

Color Checkers
Accessibility Scanner. Accessibility Scanner is an Android app that suggests improvements such as enlarging
small touch targets, increasing contrast, and providing content descriptions. https://play.google.com/store/apps/
details?id=com.google.android.apps.accessibility.auditor&hl=en

Adobe Color Contrast Checker. Associated with Adobe’s Color tool (https://color.adobe.com/create/color-wheel),
this contrast checker lets users input and adjust foreground and background colors and see contrast ratio scores
per the Web Content Accessibility Guidelines. https://color.adobe.com/create/color-contrast-analyzer

Color Contrast Analyzer. A downloadable tool (available for Windows PCs and Macs) that uses the Web Content
Accessibility Guidelines and a color vision deficiency simulator to check color contrast.

Color Contrast App. A mobile accessibility checker designed for the iPad (iOS) that lets you test colors of
apps, websites, or screenshots using an eyedropper tool. https://apps.apple.com/na/app/color-contrast/
id1095478187

Color Contrast Checker. Color Contrast Checker is a free tool that can be used to test the contrast on your
foreground and background colors. The user can type in hexadecimal color codes and the tool will generate a
color contrast “score.” https://marijohannessen.github.io/color-contrast-checker/

Color Oracle. Color Oracle is a free color blindness simulator for Windows, Macs, and Linux operating systems.
It is a lightweight application that can show the user, in real time, what people with common color vision
impairments will see. http://colororacle.org/

Contraste. A downloadable program for Mac computers only that enables the user to know if a combination of
colors, for a text and a background, passes accessibility thresholds defined by the Web Content Accessibility
Guidelines. https://contrasteapp.com/

Leonardo. A relatively new project from Adobe for creating, managing, and sharing accessible color systems for
user interface design and data visualization. Leonardo also has an open application programming interface that
enables users to use colors in their development environment. https://leonardocolor.io/#

Material.io. This tool lets users create, share, and apply color palettes, as well as measure the accessibility level of
any color combination. https://material.io/resources/color/

Monsido Contrast Checker. A basic contrast checking tool with multiple possible input methods and no
download necessary. https://monsido.com/tools/contrast-checker

10 4 D O N O H A R M G U I D E
Sim Daltonism. Available through the iTunes store for Mac computers, this tool lets you visualize colors as
they are perceived with various types of color blindness. https://itunes.apple.com/us/app/sim-daltonism/
id693112260

Tanaguru Contrast Finder. RGB and hexadecimal color input models with options to adjust the contrast ratio.
The tool doesn’t have a full interactive color wheel like some others, but it gives suggestions on how to create a
consistent palette. https://contrast-finder.tanaguru.com/

Vischeck. Vischeck simulates colorblind vision and shows the user what things look like to someone with color
vision deficiency. http://www.vischeck.com/

WebAIM. A simple color contrast checker that requires the user to input hexadecimal colors for foreground and
background objects, then returns a pass/fail score based on WCAG guidelines. https://webaim.org/resources/
contrastchecker/

Accessibility Testing Tools and Companies

Chax Training & Consulting: https://AccessibilityUnraveled.com

Deque: https://www.deque.com/

Fable: https://makeitfable.com/

Intopia: https://intopia.digital

Knowability: https://knowbility.org/

Tetralogical: https://tetralogical.com/

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 105
MEET THE DAX CASTRO
Dax Castro is an Adobe-certified PDF accessibility trainer. He is also an

AUTHORS Accessible Document Specialist with more than 25 years of experience

creating presentations for corporate communications. Castro was a
contributing author for the Accessible Document Specialist certification
through the International Association of Accessibility Professionals, he
cohosts an accessibility podcast, and runs a document accessibility
support group.

AMY CESAL
Amy Cesal is a data visualization designer and instructor and the senior
design director of data visualization at Morning Consult. She specializes
DAX CASTRO in working with subject matter experts to design accessible and legible
visualizations of complex data across domains. She is also a leader in the
use of data visualization style guidelines, writing and speaking on the
topic. Cesal cofounded the Data Visualization Society, where she serves
as an advisory committee member. Cesal’s innovative and unusual data
visualization work has garnered her three Information is Beautiful awards.
She holds an MS in information visualization from the Maryland Institute
College of Art, where she is the subject matter expert for the Data Analytics
AMY CESAL
and Visualization program. Find her at https://www.amycesal.com/.

FRANK ELAVSKY
Frank Elavsky is a design engineer turned researcher who is currently
pursuing a PhD studying the intersection of data interaction and
accessibility at Carnegie Mellon University’s Human-Computer Interaction
Institute. He is also the author of Chartability, a set of heuristics for
FRANK ELAVSKY evaluating the accessibility of data experiences. Before pursuing his PhD,
Elavsky was a lead contributor to Visa Chart Components, a design system
component library of charts and graphs built with a focus on accessibility.

ALICE FENG
Alice Feng is a data visualization developer based in the Washington, DC,
area. She is passionate about using design to make data and information
more accessible to broader audiences and recently has explored ways to
ALICE FENG bring more diversity, equity, and inclusion into how we visualize data. Her
work has appeared in the Parametric Press and the Pudding. Previously, Alice
worked as a data visualization developer at the Urban Institute, where she
built interactive and static data-based features and tools to communicate
public policy research. Alice is currently embarking on a new adventure at
Natera. She is on Twitter at @fleecealeece.

10 6 D O N O H A R M G U I D E
 SARAH FOSSHEIM
Sarah Fossheim is a multidisciplinary developer, designer, and accessibility
specialist. They have a strong focus on data visualization accessibility and
usability, having worked as a product developer and designer on data-
heavy products in the cancer research and educational sector. Currently,
Sarah is an independent consultant, educator, and advisor who helps
SARAH FOSSHEIM
companies create more accessible and inclusive solutions.

ELIZABETH HARE
Liz Hare is a quantitative geneticist researching working on dog behavior
and health. She works with breeding programs to implement data-driven
selective breeding that can improve canine welfare, health, and work-
related behavior. As a blind member of the R statistical programming
community, she advocates for broadly inclusive conferences and training
ELIZABETH HARE
as well as for accessible software, documentation, and reporting that
includes meaningful alt text for data visualization. She holds a PhD in
genetics from the George Washington University.

LARENE LE GASSICK
Larene Le Gassick is the head of technology at Intopia, a Microsoft MVP
in Developer Technologies focusing on accessibility, and community
manager of Tech Leading Ladies Australia. She specializes in building full-
LARENE LE GASSICK
stack applications with accessibility and inclusion at front of mind. She is
also an international conference speaker and guest university lecturer on
digital accessibility and software architecture. Le Gassick is one of the core
members of the DatavizA11y group, where she and other accessibility
advocates and experts come together to raise awareness of and provide
guidelines and solutions for a lack of resources in making data visualization
inclusive of people with various disabilities. When she’s not building
MELANIE MAZANEC software or talking about accessibility and inclusion, Le Gassick spends her
time cycling or scrolling through Twitter.

MELANIE MAZANEC
Melanie Mazanec is a public interest technologist located in Philadelphia.
Most recently, she worked on knowledge management and best practices
for Code for America as the associate director of Human-Centered
Government. Mazanec has also volunteered in the Code for America
network and worked as a software engineer for public-interest tech
consultancy Bloom Works Digital; the City of Asheville, North Carolina;
and a cybersecurity startup. Mazanec is most proud of her work for many
projects to help make data and data visualizations transparent and open
source. Mazanec worked in music and education before getting into tech.
When she’s not busy emailing government software vendors to inquire
about their accessibility roadmaps, she takes thousand-mile bicycle
adventures and plays the trumpet.

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 107
 SUE POPKIN
Susan J. Popkin is an institute fellow in the Metropolitan Housing and
Communities Policy Center at the Urban Institute and program director for
Urban’s Disability Equity Policy Initiative. A nationally recognized expert
on public and assisted housing programs and policy, Popkin also leads
Urban’s Future of Public Housing work and is currently the co–principal
SUE POPKIN
investigator for the evaluation of the US Department of Housing and Urban
Development’s Rental Assistance Demonstration. Popkin has led many
mixed-methods studies of the impact of housing programs on resident
outcomes, including Chicago’s Plan for Transformation; HOPE VI; and
Urban’s Housing Opportunities and Services Together demonstration,
which uses community engagement and community-based participatory
approaches to explore new strategies for improving outcomes for families
DOUG SCHEPERS in public and assisted housing. Popkin is the author or coauthor of multiple
books, including No Simple Solutions: Transforming Public Housing in Chicago,
Moving to Opportunity: The Story of an American Experiment to Fight Ghetto
Poverty, and The Hidden War: Crime and the Tragedy of Public Housing in
Chicago. Popkin holds a PhD in human development and social policy from
Northwestern University.

DOUG SCHEPERS
Doug Schepers is the founder and director of Fizz Studio, a startup focusing
on making data visualizations accessible to people with disabilities. While
he was working as a project manager for the World Wide Web Consortium,
organizing and authoring web standards for over a decade, Schepers
recognized a need for accessible data visualization, so he dedicated his
time to consulting, software development, and research to make access to
data universal and equitable. Schepers is widely acknowledged as a leader
in data visualization accessibility and is a popular speaker at conferences,
workshops, and seminars. He uses his adult-diagnosed ADHD as a tool
to help synthesize ideas from across different domains and as an intuitive
gauge for cognitive load.

10 8 D O N O H A R M G U I D E
 JONATHAN SCHWABISH
Jonathan Schwabish is a senior fellow in Income and Benefits Policy
Center at the Urban Institute, where he studies disability insurance,
retirement security, and nutrition policy; he is also a member of Urban’s
communications team, where he specializes in data visualization and
presentation design. Schwabish is a leading voice for clarity and accessibility
JONATHAN
SCHWABISH in research and has written on how to best visualize data, including
on technical aspects of creation, best practices in design, and how to
communicate social science research in more accessible ways. Through his
work, Schwabish helps nonprofits, research institutions, and governments
at all levels improve how they communicate their research and findings
to partners, constituents, and citizens. He teaches data visualization and
presentation skills at Georgetown University and at American University,
and he founded PolicyViz, a consulting firm that helps clients improve how
LÉONIE WATSON
they communicate data and analysis.

LÉONIE WATSON
Léonie Watson is the director of TetraLogical, a member of the World
Wide Web Consortium Advisory Board, co-chair of the World Wide Web
Consortium Web Applications Working Group, and a member of the BIMA
Inclusive Design Council. Watson also is co-organizer of the Inclusive
Design 24 conference, coauthor of the Inclusive Design Principles, and a
mentor to young people interested in the fields of accessibility and inclusive
design. Watson is often found at conferences talking about web standards
or accessibility mechanics and pushing the boundaries of inclusive design.
She has also been published in Smashing magazine, SitePoint.com, and Net
magazine, as well as on her own site, tink.uk. In her spare time, Watson likes
reading, cooking, drinking tequila, and dancing (although not necessarily in
that order)!

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 109
ADVISORY AMANDA BOTTICELLO
Amanda Botticello is the assistant director of the Center for Spinal Cord

BOARD Injury Research and the Center for Outcomes and Assessment Research at
the Kessler Foundation in West Orange, New Jersey. Botticello has a faculty
appointment in the Department of Physical Medicine and Rehabilitation
at Rutgers New Jersey Medical School, where she is research associate
professor and vice chair of research education. She conducts research on
the social determinants of health and disability, focusing on environmental
factors and addressing barriers to community reintegration for adults
with spinal cord injury, children with special health care needs, and other
populations with chronic health conditions. Botticello trained in social
epidemiology at the Fielding School of Public Health at the University of
AMANDA BOTTICELLO
California, Los Angeles, where she received her MPH and PhD. She holds a
BA in psychology from Amherst College.

TREVOR DYSON-HUDSON
Trevor Dyson-Hudson is the director of the Center for Spinal Cord Injury
Research and the Center for Outcomes and Assessment Research at the
Kessler Foundation in West Orange, New Jersey. Dyson-Hudson is also
a research associate professor in the Department of Physical Medicine
TREVOR
DYSON-HUDSON and Rehabilitation at Rutgers New Jersey Medical School. His research
interests include the prevention and treatment of common secondary
medical complications affecting people with spinal cord injuries. Dyson-
Hudson has benefited from his lived experiences with spinal cord injury
since 1992. He received his BA in physiology and cell biology from the
University of California, Santa Barbara, and his MD from the Albert Einstein
College of Medicine. Dyson-Hudson also completed a research fellowship
in rehabilitation research and complementary and alternative medicine at
DOMINIK MORITZ Rutgers New Jersey Medical School.

DOMINIK MORITZ
Dominik Moritz is on the faculty at Carnegie Mellon University and a
researcher at Apple. At Carnegie Mellon, he coleads the Data Interaction
Group at the Human-Computer Interaction Institute. His group develops
interactive systems that empower everyone to effectively analyze and
communicate data. Moritz’s systems (Vega-Lite, Falcon, Draco, Voyager, and
others) have won awards and are widely used in industry and by the Python
and JavaScript data science communities. Moritz received his PhD from the
Paul G. Allen School at the University of Washington, where he was advised
by Jeff Heer and Bill Howe.

110 D O N O H A R M G U I D E
 SUSAN ROBINSON
Susan Robinson masterfully blends over 25 years of multisector leadership
with her experiences being legally blind to shift thinking, elevate potential,
and inspire action regarding accessibility. In her TED Talk, “How I Fail
at Being Disabled,” she flips generally accepted ideas upside down to
uncover, challenge, and redefine preconceived obstacles. In her role as
SUSAN ROBINSON
an advisor and consultant, Robinson hosts leadership workshops as well
as business strategy and transformation planning. She received her MPA
in health policy and management from New York University’s Robert F.
Wagner Graduate School of Public Service and her BS in health policy
and administration from Pennsylvania State University. In her free time,
Robinson is a tango dancer, yoga practitioner, tandem cyclist, and
world traveler.

C E N T E R I N G AC C E SS I B I L I T Y I N D ATA V I S U A L I Z AT I O N 111