Lessons Learned From Our Accessibility-First Approach to Data Visualization
Lessons Learned From Our Accessibility-First Approach to Data Visualization
For the past five years, Kent has led several data visualizations programs at Google. He currently focuses on creating accessible data experiences that provide value and insights to everyone, regardless of their ability. In this session, Kent will spotlight key lessons learned while building accessible visualizations for Google products like Search, Fitbit, Loon, Quantum AI and Cloud. He will discuss techniques for generating awareness, building a community of experts and making a business case for data accessibility. Kent will share his group's accessibility-first approach to design and how standards can be used to empower teams to create better data experiences.
Kent Eisenhuth, Staff UX Designer,Google
I would like to welcome Ken Eisenhuth a
staff ux designer who's going to give a
wonderful talk about data visualization
and accessibility so please give them a
round of applause
good morning
good morning
how might we represent data in ways that
provides value and insights to anyone
regardless of their ability
how might we create accessible data
experiences that meet people where they
are
these are a few questions that have been
top of mind for my working group who is
striving to make data accessible through
charts graphs and visualizations
and this is an important challenge for
my group because if you think about the
products that I work on dataviz is often
prominently featured in them for example
people who are using our news properties
and search
are using visualizations to help them
find answers to questions they're asking
of the product
for people who use our consumer Hardware
devices like mobile devices are
wearables it's very likely that dataviz
is a part of their everyday lives in
fact they're typically using it to
monitor their physical activity or even
track chronic health conditions and for
our Enterprise customers we're using
visualizations to help them make better
more well-informed business decisions
and the reason why we've used dataviz is
because it Taps into the human visual
system and what I mean by that it can
help us if we think about what the human
visual system does it enables us to
subconsciously gather accumulate and
process information that's presented by
the environment around us
and this very capability enabled us to
survive as a modern species for hundreds
of thousands of years
and with that capability we can almost
instantly and subconsciously spot Trends
patterns and outliers in all of the
images that we see
so if we look at this example you might
notice that there are three visual
patterns just jumping off of this slide
one is defined by the size of the shape
we have another that is defined by the
use of borders versus fills and we have
another that is defined by shape type
and if we start to think about those
visual characteristics
size fills borders shape type
these are all examples of visual
variables or encodings which are
essentially the building blocks to all
visualizations
and visualizations of course
exploit that human visual system and
they enable us to glance at a
visualization a picture of data and
understand a very complex data set one
we otherwise might not be able to
comprehend
and good visualizations will also lead
us down the path of making better more
well-informed decisions they can do
other things too like helping our teams
gain a shared understanding of a very
difficult and Abstract problem space
now this is all well and good and well a
lot of us can experience a visualization
in its entirety
for some of us this is going to be the
experience
for other people this might be the
experience
and for some folks this is going to be
the experience and in all of these cases
we're now missing out and those
glanceable details that value those
insights provided by the visualization
to those people who can see it in its
entirety
so according to stack exchange.com we
know that over 4 million Americans rely
on assistive technology to consume web
content
we also know according to the CDC over
41 million people in America have some
sort of disability
but then we also need to think about
folks who are not using assistive
technology for example there's about 300
million people worldwide with color
deficient Vision it actually affects one
in 12 men
and these are all conditions that we
need to consider when we're creating
data experiences to ensure that
everybody has a seat at the table
so I have a working group that's been
working on this topic for about three
years and today I want to share a few
lessons that we learned along the way
and right out of the gate I'm just going
to say that this is a difficult
challenge
dataviz at least to do it right and make
something useful is difficult
to create a useful and accessible
experience is also difficult and when
you start combining these two topics
we're facing a real tangle gnarly mess
of a design challenge
so I want to talk a bit more about
useful visualizations and let's first
dive into thinking about people who are
not using assistive technology but might
have Vision disabilities and as we start
to think about accessible chart color
palettes this is actually one of the
most widely discussed topics in our
google-wide dataviz office hours program
Believe It or Not chart colors is a
loaded topic so so I want to look at
this example of this digital well-being
chart and I think we can all agree that
it fits the theme of digital well-being
the palette is cool it's calm it's
collected but the fact of the matter is
somebody with a proteinapia condition is
going to see the chart this way and
you'll notice that the upper two
segments in this donut are now pretty
much impossible to distinguish from one
another
now let's take that a step further
somebody who can't see any colors is
going to experience the chart this way
and now I would say get the dataviz out
of here let's get back to a table
because this is just pretty much a waste
of screen real estate
so where do we go from here how do we
fix this well we can start with web
standards and if we think about what
that means to us we follow what keg
standards web content accessibility
guidelines and those standards call for
the use of a minimum of a three to one
contrast ratio between a color and its
neighboring color so this is a palette
that does just that and I think we can
all agree it's really bold
when we apply it to a visualization it
might look like this
now this is all well and good but if I
were to ask you or tell you that the
most important metric on this
visualization is represented by the red
segments that appear at the bottom of
each of the Stacked bars in the series
I think you might want to guess again
because it's probably difficult to
actually see that we can no longer
glance at this visualization and focus
on those metrics that matter most
so one thing we learned early on is we
can do a little bit of a magic trick
here imagine that we place some outlines
or borders around the upper segments we
can use lighter fills and that will
enable us to maintain standard compliant
but now you'll notice that your
attention is drawn right down to those
metrics that matter most
so something that we learned early on
was that we can use a combination of
borders and fills to think about how to
draw Focus yet still create an
accessible visualization that meets
visual design standards from what CAG
so we're going to go back to the donut
chart now and we'll do a quick update on
that
and you'll notice it looks a bit better
now
but there's still a problem with this
donut chart and here it is you'll notice
that we still are really only relying on
color to convey meaning here and someone
actually has to look at each segment in
this donut chart and Visually map it
back to its corresponding Legend item
so it's important to use something other
than color to convey meaning now that
could be a texture it could be an icon
it could be another visual encoding it
could be an overlay of text but it's
important to do this so that we minimize
our Reliance on color here
now sounds pretty easy right
but a lot of times if we just throw
patterns on visualizations sure this
might meet accessibility standards but
you have to ask yourself is this still
glanceable is it still readable
so how do we make these experiences
accessible and useful
how do we minimize chart junk for those
of you Edward tufty fans out there it's
a a classic term
so one way we might be able to do it is
let's get rid of the legend we can think
about how to Overlay text and other
imagery on top of the chart that will
explain the metrics
but sometimes we don't always have the
luxury of being able to just Place text
around the visualization like this one
so other ways we might consider doing
this is adding symbols or icons and I
would say do this sparingly only in a
chart that might have a limited amount
of categories
and here we actually used a combination
of fills and borders to draw Focus to
metrics that matter and the cool thing
about this if I want to highlight
something in this chart you'll notice I
can do that by bumping up the shade of
color so now we're still drawing Focus
but some charts are Tangled not of a
mess and I'm sure we've all seen an
overloaded line chart before like the
one on the left here
and this is where the dataviz expertise
comes in and start thinking about other
ways to tell the same story visualize
the same information in this case we can
break up this complex chart into
sparklines or mini charts where arguably
we can all better read the individual
Trends and you'll notice we removed our
Reliance upon color here and we have
text appended to each of them all things
that are going to be great for
accessibility
uh you'll also think about status those
of you who design dashboards it's a
pretty important metric and we've been
thinking about ways to combine outlines
and filled icons where the filled icons
will draw your attention to the items
that matter most those items that need
your attention so someone who's red
green colorblind can now scan this table
and actually look at those icons that
are filled and we'll hopefully jump out
at you but not all these challenges are
straightforward and we found ourselves
taking inspiration from unexpected
places for example we look to Nature to
think about how we might visualize a
weather system we look to halftone
printing processes to think about how we
might reimagine a heat map with dual
encodings and we also took inspiration
from architecture and the way in which
people flow through a building to think
about how we might reimagine a progress
indicator in this case using an inner
circle that meets those color contrast
criteria
but yet is animated and helps us
understand that the chart is filling up
rather than draining down to zero
so as we started thinking about this
this is where we got this idea that
thinking about accessibility first
generally leads to a better outcome it's
easy to think about accessibility at the
start of the design process rather than
retrofitting these requirements and
ideas to existing charts and as we
started to do that we realized we were
creating experiences that even for
people who are fully sighted get back to
really exploiting those pre-attentive
processing capabilities the human visual
system all those things that I mentioned
earlier on in my talk
okay so let's move over to the assistive
technology experience and I'd love to
share a few Lessons Learned on that end
as well
so right out of the gate lesson learned
it's important to build a diverse team
of people to help you with this work so
we partnered with people who use
assistive technology in their daily
lives we've brought in people with
disabilities to help us in our design
process and this really changed our
perspective and the way in which we
approached these design challenges
so let's think about this a bit more the
assistive technology experience
navigation is a difficult design
challenge especially with dataviz so how
might we structure our chart so it's
easy to navigate with a keyboard and
this is something that's going to be
really useful for people with limited
Mobility or using assistive technology
here's a visualization that was popular
a few years ago this was civilization of
a LinkedIn Network
and I want to do a bit of a design
exercise here I want to ask you how
might we navigate this experience with
the keyboard
the first thought that might come to
mind is well you can tab through all the
nodes or people in this network but some
people are influencers and have hundreds
of thousands of connections
so we want to ask ourselves
is it responsible of us as designers to
require people to tab through thousands
of people especially if they're only
trying to interact with something that
appears after this visualization on the
web page I think the answer is no
so how might we reorganize this well
you'll notice that color is used to
indicate different pockets of people in
this network and these could be people
that went to the same University these
could be people that maybe work at the
same company or belong in the same
Social Circle
so perhaps we could think of a
hierarchical navigation here perhaps You
tab to the visualization you could
navigate through the tab through the
different groups select a group and then
tab through the individuals in that
particular group
a lot less tabbing
another thing we might be able to think
about is how we might leverage
alternative keys and what I mean by that
is maybe you could arrow through the
visualization we could flatten the
experience you could tab to it select it
and then arrow through it as you wish
now if we think about a lot of network
graphs and their core use cases what
they do well is they help us spot the
most influential nodes on the network or
in this case the people in your network
who might be those influence influencers
or have the most connections so perhaps
we could think about maybe using
keyboard shortcuts that would enable you
to only navigate to those people that
are very well connected or more
influential in your network so these are
three different ideas I just threw out
there the possibilities are really
endless and the way we would solve for
this is right here it's important to
think about what questions people are
asking of the visualization and crafting
a navigation experience that helps them
quickly find answers to those questions
and of course in Google and in a lot of
our products we've been thinking about
this a lot and here you can see an
example of keyboard navigation where we
have synchronized brushing through a
very complex dashboard and we're using
the keyboard to find out more about
different categorical metrics here
okay so talked a lot about navigation
let's move on to text and this is
actually one of my favorite topics how
might we leverage text to guide people
through the experience
now this is easier said than done and
this is going to be very helpful for
people who can't experience the
visualization or see it
so how can we leverage text to provide a
glanceable view of data and how can we
do it without introducing now this is
going to vary depending on the use case
of the chart so we have visualizations
that are more exploratory in their
nature typically these are used by a
data analyst these visualizations aren't
going to directly answer questions but
they're going to unlock the next set of
follow-up questions that this person is
going to ask in an investigation this
could be a root cause analysis of
something in this case we might use text
to prioritize affordances for data
exploration
now there are other charts as designers
we're pretty confident we know the
questions people are asking of this data
and in this case we might be able to use
text to uncover some insights maybe
highlight some interesting Trends
unexpected dips and spikes in the
Stock's performance in this case and of
course giving us an indicator of how
well this stock is performing at that
point in time
now other visualizations are used in
journalism and in a lot of these cases
the main takeaways are highlighted front
and center for us and in these instances
it's important to do that because the
visualization is typically a supporting
element on that article it's supporting
the overarching narrative
so in this case we might actually be
able to provide a bit of a summary about
what's happening in this particular
visualization
I'm really excited to think more about
the potential for large language models
and Ai and how they might be leveraged
to help us understand what's happening
in visualizations that we cannot see
so well we're on the topic of text let's
talk about the screen reader experience
and as I mentioned before we worked with
people who use assistive technology in
their daily lives
and one thing that we learned along the
way is that when you're navigating
through the data experience It's always
important that the screen reader is
constantly orienting people within the
data set explaining where did we come
from where are we now and where can you
go and at every step of the way
highlighting what's happening in the
data at that level of the experience
we also learned that it's really
important to give access to the
underlying data set especially for those
people who are interested in data
exploration this is not only good for
data integrity and transparency but we
also learn that a lot of people who use
screen readers are actually very
proficient with navigating a basic data
table and pulling out some basic
insights from that and I would say use
this sparingly this is not the Silver
Bullet that's going to solve the problem
here but it's something that you could
add to your toolkit and test
I also want to talk a little bit more
about how we might leverage other senses
in this case sound when representing
data so data sonification is a really
great tool how can you play audio tones
that help people listen to a data set
and experience it in a really compelling
way
and data sonification if you're not
familiar with it is actually part of our
everyday lives today and if you've ever
used an elevator and you call the
elevator when the doors open you
probably heard a chime sound
well did you know that one chime means
the elevator is traveling upwards and
two chimes means the elevator is
traveling downwards this you may not
have noticed but that is a great example
of data sonification and it's part of
the core experience
so what we're thinking about
is how can we bring data sonification
into that core experience so it's not
available only to folks who are using
assistive technology but it's available
to us all
so it talked about a lot of lessons
learned here in our actual work over the
last few years
but I want to talk a bit more about
making it happen and in this current
economic climate we're seeing a lot of
Dei initiatives that are getting
defunded or even cut in some cases
so if this is something you believe in
and you want to bring to your
organization how do you do it
so we uh
you can make a business case for this of
course we all want to be good citizens
of the web
and create accessible experiences and
for us at Google that's always been part
of our core Mission but sometimes it
needs more than the case for good
citizenship to do to get the attention
of Business Leaders so a few business
cases here according to Annie Jean
baptiste's book there's a one trillion
dollar market for people with
disabilities in the consumer Market this
is as of 2017.
but then also there's a liability that
comes with this as well and if you've
ever tried to pass a visualization
through an accessibility audit you'll
know that it will crash the audit it
will block it and it will be flagged so
giving access to the data isn't good
enough but thinking about some of these
other techniques that I shared is going
to become important and this can get the
attention of Business Leaders in your
organization
so what we did was we've always been
meeting compliance but we've been
thinking a lot about how do we do that
while still creating a thoughtful and
useful experience
and that takes a lot of capacity a lot
of brain power a lot of extra effort I
hope you could see that through some of
the challenges that I highlighted
earlier in my talk
so what we did was we actually started
to realize I worked in a team in cloud
and we were solving these problems there
that there were other teams in our
organization working on other products
that were asking these same questions
trying to solve these same problems so
we huddled up with them and we created
our data accessibility working group
which we so lovingly refer to as dog and
we felt like we could learn from each
other let's not spend our extra time
away from our day job Reinventing the
wheel let's leverage each other's
research let's learn from each other use
what's already out there and proven
within our organization
in doing that we started to collect a
repository of knowledge that we could
eventually publish to other people in
our company and even people in the
outside community and the idea is that
we would really want to help them get
started
so in building a community organically
like this a few Lessons Learned here and
this is applicable to an accessibility
challenge or any challenge that you can
get behind as an organization
uh we felt it was important to learn
from each other but presentations only
give you one-way feedback so we wanted
to really Empower people in our working
group we wanted them to engage and we
opened up space for brainstorming we
opened up space for Community
contribution and in thinking about doing
this over the past three years as we
started to talk about this topic more as
we start to see who our Champions were
within our group we could identify who
was actually going to help us publish
something
and we ended up publishing a whole
plethora of resources internally demos
assistive technology demos design
patterns guidelines resources that could
help anyone get started and this could
be the person who's casually drawing a
chart in slides or PowerPoint to the
person who's actually deploying a
production ready visualization in
products
and for folks here today in the external
Community we actually wrote about this
topic and packaged some of our top tips
for getting started and publish them out
on the material design blog so I would
encourage you all to go out there and
check that out
a quick note about process thinking
about the spirit of this conference
design Sprints were very important in
helping us problem solve here we did a
lot of rapid prototyping so we could get
some of our work in front of people who
use assistive technology and then learn
about their experience make a few
adjustments and then get it back and
retest so design Sprints are really
important rapid prototyping was really
important here we did a lot of drawing
and thinking about that time at the
Whiteboard with my engineering Partners
inspired me to actually write a book on
ux drawing so this is for anyone who
goes into design Sprints who might not
be comfortable with drawing and it's a
deep dive into the visual language of ux
that can enable you to be engaged in the
problem solving process and solve a
detailed problem like data accessibility
like we did for this week for conference
goers we're actually offering uh the
book A discounted rate with Wiley
publisher so you can head out to their
site and use the promo code you can also
get it for a discounted rate at Amazon
too
so I want to leave you with a parting
thought
and as we're thinking about the devices
that we design for the surfaces that we
share data on I want you to think about
those core capabilities those devices
ship with and I want you to think about
the lessons learned today and how we can
leverage high resolution displays to
create a beautiful visualization that's
not only useful to someone with a vision
with disability but also useful to
someone who is fully sighted I want you
to think about the data sonification and
how we can leverage a device's audio
playback capability I want you to think
about how we talk about data and use
text and what the narrated response of a
data experience could be I want you to
think about the haptic feedback and all
these things that will enable us to not
only see data but listen to data and
even feel data and as if we start
thinking about these experiences more
holistically together we will all make a
lot of progress towards answering that
initial question I post how might we
create accessible data experiences that
truly meet people where they are
thank you very much and I also just want
to give a shout out to all of my
colleagues Engineers product managers
designers researchers people who use
assistive technology who helped us
through our design process I'm really
lucky to be here representing the body
of work from a large number of my
colleagues so I want to make sure I
acknowledge that as well if you like the
talk feel free to follow me on social
media we can keep the discussion going
there
and finally I'm going to leave you with
all the lessons learned that I covered
today so if you'd like to take a picture
of this for your own records you can do
so thank you very much everybody
[Applause]
so much Kent for an amazing talk I think
a lot of times when we think about
accessibility we think about digital but
thinking about you know all these other
experiences that where we might
encounter them and I want to share a
personal story when I first started in a
leadership role and we would look at
some of our road maps and and dashboards
I'm red green colorblind so you could
imagine what it's like for me when I'm
looking at Dad's dashboard and I'm in
this meeting with a bunch of
stakeholders and I'm just like I have no
idea if we're crushing it or if we're in
trouble
and uh you know just the empathy and
Care in your talk thinking about making
sure how do people interpret the data
the data visualization sees those
stories like just thank you so much uh
amazing talk
um so I brought my friend out here see
if there are any questions
um okay I'm I'm gonna throw it in the
back so
nice
that was actually perfect thank you
um I'm really curious and thank you so
much for a wonderful presentation and
all of the you know insights that you
shared super awesome I really appreciate
it um I'm curious how you team is
structured
um and what knowledge the people have
around accessibility on your team
yeah that's a that's a great question
because this requires this problem at
least requires people who have expertise
from many different backgrounds so the
way our organization is structured is we
have a central accessibility team who's
always advocated for accessibility on a
lot of our products
that team consists of accessibility
analysts subject matter experts and yes
people who have disabilities and use
assistive technology in their day-to-day
lives so we worked with them a lot on
core product teams we had the typical
Triad of engineering ux design and
research and product management and
together we worked with those
accessibility experts and also brought
the data visualization expertise into
the picture to be able to solve some of
those problems the working Dynamic was
very fluid as I had mentioned before so
first we started with standards to
understand okay well like what do we
need to do to get to compliance and as
we started working with those standards
we realized it was really easy to make
an experience that wasn't useful so then
we started focusing more of our energy
on that and the cool thing about working
at a place like a Google or a very large
organization
there's probably somebody else
simultaneously trying to solve the same
problem so for us it was a matter of
looking to people within the
organization that had a view across
different products and could help us
connect those dots and start to engage
with those other teams so of course
other product teams are going to be
structured very similarly but then as we
could start Gathering research even test
data from accessibility test sessions
and usability studies we could start to
look at how what we could leverage
because three or four years ago there
really wasn't a lot of information out
there on this topic and we kind of
looked from within to start putting
something out there and that's what we
were trying to do with our working group
to help other people get started
but it really took some collaboration
with other teams and of course those
accessibility experts that I had
mentioned before
thank you yep we just want to make sure
um answer a question online too yeah
we've got an online question here from
Lindsey defore she says when it comes to
accessibility for things like using
specific colors or fill styles for data
visualization do you find it best
practice to make that the standard or an
optional configuration ah so yes we
always try to strive to make that the
standard if we can if we start out by
saying we're going to just resort to an
accessibility mode I feel like that just
becomes a junk drawer for features if
you will so let's be a bit more
thoughtful about how we're applying
these visual design techniques to the
core visualization and I actually wrote
an article that was published on
Smashing Magazine last year with a
colleague about this particular topic
and thought process I'm sure it could
share the link through the conference
organizers for anybody who's interested
but it's called our accessibility first
approach to chart visual design and you
can learn more about the thought process
there and why it is better to just
provide this thought for everyone rather
than resorting to an accessibility mode
thank you
oh hi I'm Jason and I was very curious
about the data sonification that you
mentioned yes
um so at Google is there like sound
Engineers that kind of create these
sounds and is there like a prototyping
testing for these sounds yes so we
actually have a team that specializes in
data sonification
um it's wired up to line charts today in
in a very few uh specific products
and they've done a lot of work with
audio Engineers to think about
techniques for actually quantifying data
through sound so when we first heard
this we thought oh we're going to hear
these really nice sparkly musical tones
but it's not that easy because the
scales don't actually match up now I I
can't speak to the testing environment
quite as much I come from a design
background but I could Circle back with
the team who has worked a lot on that to
provide an answer
about the testing environment oh yeah
thank you yeah I'm definitely interested
in that
awesome and then I think we're right at
time so can't thank you so much thank
you thank you everybody it's a pleasure
being here