Lessons Learned From Our Accessibility-First Approach to Data Visualization

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