hi everybody thanks for coming we're

really excited to have you all here

today my name is Jen Devin's I lead the

user experience team for Google

accessibility and with me I have Andrea

Wong she's a researcher on accessibility

Catherine ideal who is a designer on

accessibility and Bethany Fong who is

the lead designer on Google material

design we're really happy to have such a

great crowd here that's interested in

inclusive design and accessibility and

we're looking forward to sharing with

you how you can make your products more

inclusive but before we dive in and get

into specifics we wanted to start with

just some basics what is accessibility

inclusive design and why it's important

as described by the web accessibility

initiative accessibility usability an

inclusive design are all very closely

related their goals approaches and

guidelines overlap significantly and

when we sit down to design and develop

our apps it's really effective to

address them together let's start with

accessibility accessibility focuses on

enabling users with disabilities to

perceive interact understand and

navigate tools and services products and

that they can contribute equally without

barriers now some of the guidelines we

think about with accessibility such as

clear color contrast or clear concise

writing are useful not only its users

with disabilities but also those that

might be or that don't have disabilities

but might be in different situations for

example we know that alternative text

can be useful to users who are blind and

can't see the screen as it describes the

imagery and visual

icons alternative text can also be

useful to users who might be out in

remote locations with low bandwidth or

using old technology another example

it's clear that providing enough time

for users to interact with and read

content on the screen is useful for

users who might have a motor impairment

or cognitive impairment this extra time

is also very useful for users that might

be learning a new language or have low

literacy or even children learning to

read or simply just people distracted

and this is how accessibility is a key

component of inclusive design inclusive

design is all about considering the wide

range of human abilities we think of age

gender ethnicity and others and as you

can see accessibility overlaps

significantly with these areas as well

and that's why we feel like

accessibility is a really clear starting

point so at this point we could just

throw up on the screen a checklist of

guidelines for you to follow to ensure

that your product is accessible and

that's a great place to start no doubt

about it however what we've seen is that

may often lead to a product that's

technically accessible but not

necessarily usable let alone a great

experience for all users and this is

where usability comes into play now how

many people by a quick show of hands

take time to reach out and get feedback

and input from users which oh right it's

it's an important and really useful

thing to do right unfortunately we know

that a lot of users with disabilities

are left out of this really key critical

point in the process if we're

out there talking and observing our

users will never understand what are

their true experiences what are their

challenges and most importantly what are

their insights that could actually

benefit everyone and in the end you

could be left missing out on a large

number of potential users and also miss

out on helping existing users who might

be in these limiting situations okay so

that's the basics

we got the stage set let's we now we

want to walk you through more of a case

study to demonstrate how to design and

develop with accessibility in mind we're

gonna today we're gonna use our

fictional app it's a travel and

hospitality app called crane and we're

gonna use this throughout the rest of

the talk to demonstrate specifics of how

to make products more inclusive using

the standard user centered design

methodologies as well as material dot

material design system which includes

clear guidelines components and tooling

okay so to get this started we're gonna

break it down into four primary stages

we have defining the product vision

design development and after design now

this framework probably seems familiar

to you

and that's on purpose we're not here to

introduce yet another process for you to

follow instead we see this as a toolkit

of ideas and things that you can do to

enhance your product to make it more

inclusive because in the end inclusive

design is really just simply good design

okay so now andrew is going to walk

through the first stage of defining the

product vision next gen

Stage one defining the product vision no

matter what you're building

understanding what problems are solving

for users is the key to product success

so who are your users most teams start

with the assumption that all their users

are fully abled but that may not always

be the case so let's say you're building

a Photos app and you think well why

would someone who is blind to use my

Photos app actually a person who is

blind may use your app because they want

to take photos and then share them with

friends and families or post them on

social media just like everyone else

consider these three people on the

screen there's a man in a wheelchair

with Lou Gehrig's disease so he has

impaired motor functioning for upper and

lower body there's a boy with a broken

arm and there's a woman holding a full

bag of groceries let's have a pop quiz

which of these three people have limited

mobility raise your hand if you think

it's the man in the wheelchair okay

that's down raise your hand if you think

it's the boy thank you and lastly raise

your hand if you think it's the woman so

if you raise their hands all three times

you're correct all three of them have a

different relationship with limited

mobility

whether it's permanent like the man

temporary like the boy or situational

like the woman the groceries yet they're

all experiencing the exact same need

right now it's a good reminder that for

every single one of us will have

accessibility needs at some point

throughout our lifetime disability is a

much broader term than we might think

and often when something doesn't work

well for a user with no disabilities

pain point is amplified for people with

disabilities and that's actually good

news for you because it gives you much

clearer signals of what you should be

focusing on because when everything

doesn't work when something doesn't work

for everyone

it clearly is something you should be

paying attention to and that's in fact

we found with our studies at Google all

users have the same core needs because

they're all trying to you know meet the

same goal whether it's sending a

photograph reading email buying crypto

kitties whatever it is so at this point

you're probably asking well how do I do

research with people with disabilities

the answer is do what you usually do are

you let's say in the early stage right

now where you're just chatting and

sitting down and talking to users if you

are that's absolutely the easiest and

the best time to be including users with

disabilities into your process because

you can get their contacts their needs

and everything right from the very start

you can ask the exact same questions as

you would to someone without

disabilities the only difference is you

have to ask a few additional questions

about the assistive technologies that

they'll be using and their contexts of

use so for example you'll be asking say

how do you use your sips technologies

when you're navigating a mobile device

or how does your impairment impact or

not impact your interactions when you're

planning travel or maybe even which

workarounds if any do you use to get to

what you need and always always follow

up after each question with why tell me

more to really dig in there to get the

context of their needs the bonus here is

their answers may inspire new ways of

interactions that you've never thought

of before or maybe you're past a stage

ready that's fine right now you're

testing a low fidelity like paper

prototype that's fine you can still test

people with disabilities

let's say you're testing with the user

who is blind and uses a screw meter

which is an assistive technology that

reads out loud the contents of the

screen so you're doing that but you

don't have a screen reader friendly

prototype well you can't do here though

is write a script of what the screener

might verbalize and have someone on your

team act as a screen reader and that

person can read each step out loud to

the user as they walk through the user

flow during a study session by

integrating people with disabilities

whenever you're talking to people

without disabilities you're

automatically ensuring that their

viewpoints will be included and part of

the process throughout the entire design

in the development phases along with

understanding user needs you need to

have a general comprehension of

assistive technologies and the different

tools that people may use interact with

your product trying the technologies

yourself is a great place to start but

the best way to learn is to observe the

real experts those are the people who

use these technologies day in and day

out and if you can't find someone to

observe in real life that's okay you can

just go online and look for any kind of

video whether it's like going to the ATM

going to grocery store there are

countless great videos online to explain

the different ways people use different

technologies the goal here is to

understand what makes a good versus a

poor experience what are the common

pitfalls and the standard expectations

that people have when using your site or

app later using our fictional app crane

will walk you through designing a great

keyboard navigation model starting with

the keyboard intern avocation model

creates a very good foundation for you

when building for other asset

technologies which we won't go into here

you may be feeling a bit overwhelmed

right now on how to design to meet all

those needs

but the great thing about design

inclusively is that people and teams

have been working for years to

understand what design inclusively

actually means so as Jen mentioned

material design components includes

accessibility guidelines baked right in

that anyone can follow regardless of the

size of your team doing the right thing

though isn't necessarily mutually

exclusive to good business sense either

it could even increase your market share

according to the american institute of

research who came up with this report

few months ago working age people with

disabilities in the US alone have a

discretionary income of 21 billion

dollars that's the third largest market

segment in the entire country

then if you think about their families

and friends who may also use your

product to interact with them or you

know they may just simply appreciate

good design and this is not just the US

alone according to Gartner people with

disabilities and their friends and

family worldwide have a collective

disposable income of eight trillion

dollars think about that okay that was a

lot of information so let's go over the

important points to keep in mind one

talk to people with disabilities to

inform your product vision to learn

assistive technologies from the experts

and three build a better experience for

all users and potentially capture more

market share now I'm gonna hand it over

to Catherine who's gonna go over stage 2

design right hope you're right here

thanks Andrea

hi

now that you've defined your product

vision it's time to design your app at

this stage you'll need to think about

interaction design visual design UX

writing and motion design but don't

worry we'll do a design challenge

together using our fictional app crane

to learn how to do this so crane is a

travel and hospitality app that lets

users book flights and accommodations

and a computer or phone in terms of

interaction design you might be

wondering how do I even get started

design accessible and usable experience

for everyone well design as you normally

do have your wireframes and your

sketches and we'll get started there

this is a wireframe of filter options on

mobile when you search for a flight on

crane here we can see that the check

boxes are aligned with the label but

they're pretty far apart when designing

your layout ensure that related content

and controls are grouped together this

makes it easier to understand and also

easier to reach for people with motor

disabilities especially for people with

ALS or a traveler on a bumpy train so

what we did here is that we placed the

check boxes right next to the labels

it's just a better experience for

everyone in terms of in traditional

interaction design you can also have a

huge impact on all users by thinking

about the tab interaction model meaning

a great keyboard experience here we have

a wireframe on web of the flight search

results tabbing on the keyboard allows

you to jump from one interactive element

on the screen as we can see right here

this would be the default type

experience if we didn't design it at all

it would take

94 tab stops to go from point A the back

button to point B

the filter options this is a slow

experience so what we can do is actually

group major elements together like this

list of individual flights now it only

takes seven tap stops to reach point B

and once you've grouped your big tab

stops together don't forget how to

quickly navigate to those smaller

elements such as the individual flights

and this big list of flights here we'll

go with an up and down arrow option to

navigate between them overall this is a

much better and productive experience

for power users much like yourselves

right here and assistive tech users

alike here are some things you can do to

make your app more accessible in terms

of interaction design group your content

and your controls together design your

tab interaction model and don't forget

the air navigation as well now on to

Bethany to talk about visual design

thanks Catherine so now that we've laid

a good foundation in terms of

interaction design let's refine our

visuals now to start with the very

basics I'm sure you all have felt the

pain of viewing light gray text on light

gray background let's not put our users

through that so the number one way that

you can be a hero for these users is by

ensuring that color contrast is between

your foreground and your background

colors is going to be high enough and

you can use our material color tool

pictured here to check the legibility of

your choices and check them against

different background colors like the

three shades of purple here that we were

exploring for the crane app so let's

apply this going back to our app where

the user is filling in their information

to purchase their flight these faded

colors that you see are trendy but the

contrast is so low that it's hard for

even most sighted users to have a

legible experience here and remember

this is going to be better

not just for users with low vision but

someone with dilated eyes after a

doctor's appointment or people like

yourselves out in the Sun all day with

glare on your screen so let's add more

color contrast first we're gonna zoom in

on how we can add contrast into the text

field component we increase the font

weight and color darkness in the text

fields which makes it easier to scan and

ensures a better visual hierarchy and we

also increase the background color

darkness on the button at the bottom

making the text more legible and making

the call-to-action much easier to spot

which is really important because you're

trying to get your users to purchase

something here and already with the

before and after you can see that this

is a much better design other than just

looking more aesthetically pleasing the

text is more legible the relative

importance of elements is clearer and

the calls to action are a lot easier to

spot so now your user is filling in

their information into those much better

text fields and it's getting closer to

booking that flight but it looks like

they made an error some users can tell

because of the bolded orange

outline however some users with

colorblindness might miss this important

piece of information and this can be

fixed by supplementing any information

that's coded in color through other

means like icons or shapes so we're

gonna check out the material icon site

and search for error icons it's good to

use essential resource like this because

these are common visual metaphors that

may be recognizable to a wide variety of

users so looks like we can go ahead and

use this one so we're gonna download it

add it to our text field and now there

are two ways to understand that this is

an arrow state and this makes it clearer

for everyone not just users who are

colorblind and for our last visual

design example let's look at focus state

an element size on the screen so when

users choose a seat in this travel app

it's important that they can select the

seat that they want and that they know

that their selection was successful and

on mobile this means having a touch

target size of 48 dip by 48 dip or about

7 millimeters wide which is calibrated

against the size of an adult fingertip

make sense and on web try to ensure that

your focus is highly visible you can see

it as a bold purple outline around seat

8a so when you're doing your visual

design when keeping it accessible make

sure that you have high color contrast

make sure that you have multiple visible

indicators for any important component

States and lastly make sure that your

touch target sizes are gonna be large

enough for people to actually reach back

over to Kathryn

thanks Bethany I'm back with writing you

have the power to guide all users with

accessible on-screen text as well as

meaningful off-screen texts they'll be

verbalized by the screen reader a screen

reader is software that sits between you

and the application and it works in

tandem with the keyboard the keyboard

moves the focus and the screen reader

will verbalize whatever has come into

focus we have this example from

google.com

if you heard of it and it will read this

button as Google search button because

the screen reader automatically reads

out loud the label Google search and the

control type button so back to our crane

app here we have a checkout screen has

several interactive elements but let's

just focus on these four buttons and

remember the screen reader automatically

reads out loud the control type so it

will verbalize these buttons as button

button button button that's problematic

we don't know what the buttons will do

and the council order and complete order

actions or right next to each other

which could lead to major user error

instead what we can do is add meaningful

and concise accessible labels in

addition to the default button

verbalization so here we've added

previous step

checkout progress cancel order and

checkout order now we know what each

button will do and they won't be a major

at gas of counseling order rather than

completing one and vice-versa you can be

a champion for screen reader users by

writing accessible labels in addition to

the default verbalization provided by

screen readers in terms of motion design

have you had something important flash

before your eyes blink and then be gone

well this just happened to you

and is a major pain point for users of

low vision or someone who isn't paying

attention

try to ensure that alerts like snack

bars are present on the screen long

enough so that everyone can see them

like right now and have an option to

easily dismiss them like a dismiss

button or tapping out function

likewise consider supporting screen

magnification users here on web when a

user hovers over a seat they get

additional information about that seat

in a hover card but it covers the rest

of the screen when magnified to help our

users get back to whatever they are

doing consider an easy escape hatch such

as an escape key shortcut or a close

button to ensure that your emotions is

unaccessible present alerts for long

enough and have an option to easily

dismiss them likewise easily escape

hover information during screen

magnification at this stage we've

designed the interactive visual writing

and motion aspects of our product now

it's time to talk to users get some

feedback and check if you're on the

right track also see if you ran into any

major blockers you didn't anticipate

consider running a year stick evaluation

it consists of having a small set of

examiner's evaluate your app against

known usability principles otherwise

called heuristics so right here we have

three years ticks from the material

design accessibility guidelines and

they're clear the robust and specific so

let's check is your app clear meaning

arts layouts non crowded and arts calls

to action visually distinct is your app

robust does it support a variety of user

capabilities finally is our app specific

does it specifically support a variety

of user technologies

the ways that the user expects let's try

this out with crane so here we have two

button variations and we want to see if

it's clear enough for vish low-vision

users well we may find that these two

buttons actually have the same color

contrast but we may also find that

people prefer the one on the right

because the shopping cart icon makes the

purpose of the button more obvious for

people with and without disabilities

after completing your product conduct a

year six evaluation and feel free to use

the accessibility guidelines provided my

material design is your app clear robust

and specific now back to Bethany on how

to develop your app thanks Kathryn so

you've moved on to the development stage

and you'll want to make sure that all of

those decisions you just made in the

design stage pulled through to the final

product so the first thing you can do is

use standard components when designing

if you use material components they will

be pre-vetted work well within a

holistic design system and they'll be

usable and recognizable to your users if

you use something non-standard note that

you'll perhaps have to design the full

component yourself as well as marking it

up with the appropriate metadata

particularly for screen reader users

you'll need to provide labels structure

and traversal paths and designers one

tool that you can use is gallery created

by Google to help you manage design

iterations and get quick design feedback

if you use our material theme editor

with sketch which is a popular design

tool and upload your mocks to gallery

you'll automatically see all

measurements or red lines as designers

call them for example you can see here

how large this price text is and make

sure that the touch target size is going

to be large enough to be tackle for

people with hand tremor

you can also use it to communicate back

and forth with your team about

accessibility markup and any

verbalizations or UX writing that you

might want to do and don't forget to

scalable text this allows for a piece of

text to scale up or down according to

the user's individual settings this is

really important for users with low

vision who may have large text turned on

but usually the rest of the UI remains

the same size so follow the specific

platform standards for how scalable text

should be implemented and here's the

same screen with the large text now

rendered correctly we can actually read

it which is great so engineers you can

keep users with various impairments in

mind as you code just as a designer

would periodically consider a user with

low vision no vision or some mobility

challenges and one way of focusing this

work is to schedule periodic bug

fashions and fixit's from a specifically

accessibility point of view and there's

also a number of tools that you can use

during development to check your

accessibility on web and on Android

these include accessibility scanner and

Android which is the app shown here

which is really easy to use because it

checks your app screen by screen for any

accessibility errors and come by the

accessibility of sandbox during i/o to

speak to our engineers to learn about

other dev tools that you can use during

your own process so as you're developing

don't forget to use common components

when you can and it just inherit the

work that we've already done for you

there use scalable text and use

accessibility development tools

throughout your process to check

yourself as you go

thanks Bethany so now I'm going to talk

about the last stage Stage four after

development at this point the bulk of

your development work is complete and

you're about to launch this at this time

we recommend using a tool like

pre-launch report from the Google Play

Store some of you may already be using

pre-launch report but the good news is

it now includes accessibility so upload

your app to alpha or beta Channel and

I'll crawl through your app to identify

a number of ways to improve it like

crashes links the issues and of course

accessibility and you won't need to

instrument your app ahead of time for

the web

we recommend automated accessibility

tools that's built right into our chrome

dev tools so inside the audits panel

you'll see a tool called lighthouse

lighthouse will run about 40 automated

tests against your site to check for

common accessibility issues when it's

finished

we'll give you a score it'll point out

the failing elements and the best part

is they'll link you to documentation

with instructions on how to fix those

failing elements and if you've done

everything right up to this point if you

listen to all of us and then everything

here should be a breeze one more thing

no great onboarding experience is

complete without good help content and

help content is a resource that people

with disabilities often utilize so make

sure you include in help content on

accessibility and make sure that content

is actually accessible this is a great

opportunity to help all users get off to

a great start with your app or product

and recover quickly when they get stuck

okay you've launched now that we're here

you're probably going through your

metrics your analytics your tracking the

effects of your launch the user

engagement and so forth

you're hopefully also doing user studies

and you're measuring satisfaction to see

how well your app is bringing a thief by

everyone at this point include

respondents with accessibility needs so

that you're hearing all the feedback

this is also the perfect time to stop

and understand what benefits your team

has reaped from design inclusively from

the very beginning so here I do a

post-mortem decide what to cut what to

keep what to change and apply that to

your next cycle over time design

inclusive league will become second

nature to you let's go over the main

points one check for common

accessibility issues with pre-launch

report and lighthouse and can't let

other tools out there make sure you have

accessibility help content that's

accessible and get feedback from users

with disabilities and now Jen will

summarize all this for us Thank You

Andrea

all right so there you have it our

toolkit of ideas that hopefully you can

apply to your process we know it's a lot

of information there's a lot of great

resources out there that you can rely on

we wanted to leave you with one thing

you can do during each stage of the

process

starting today so if you're starting out

and you're defining your product vision

can't stress it enough get out there and

talk to users

if you're curious of where should I find

users with disabilities I don't know

anyone there's lots of organizations

nationally and internationally that you

can reach out to and they'll often put

you in contact with their members and in

fact today in the design and

accessibility sandbox across the way

there are members from the National

Federation of the blind that are willing

and wanting to give you feedback or just

answer your questions if you're in the

design stage you probably started

working on your interaction workflow

model and you're thinking about it have

it drafted before you get too far

take a step back and think now how would

a user that's using just a keyboard go

through this interaction model how would

they get their tasks done this is a

great place to start and you'll be be

very happy you did this earlier than

later if you're in the development stage

use standard components they've been

stress tests and they're from familiar

to users which is great you don't want

users to have to relearn their app or

each for each screen and finally if

you're nearing that finish line and it's

after development just as Andrea

mentioned we really recommend ensuring

that you have accessible onboarding and

help content and if it makes sense for

your app to have accessibility focused

tutorials and onboarding material

amazing making inclusive products is

critical we all have the power and

responsibility to remove barriers and

empower all users to be productive and

connected

[Music]

[Applause]

[Music]

[Applause]

[Music]