Jen works to make Google products universally accessible by consulting with teams on accessibility design practices and guidelines. She has also worked as a user experience design manager on products such as Google Search and Google Analytics. Prior to Google, Jen was an interaction designer at eBay and worked on the finding and buying experiences.View the profile
Bethany is a UX Lead on the Material Design team at Google. She was one of the first designers on the Material Design system, and previously designed for Android, Android TV, and Accessibility. She has a B.S. in Product Design from Stanford University.View the profile
Catherine is an interaction designer on the Central Accessibility team. In this role, she focuses on ensuring cross-horizontally that products and designs at Google are accessible and inclusive. She has previously been on G Suite and Ads. Most recently, she has spoken at CSUN. Catherine studied psychology and neuroscience at Princeton University.View the profile
Andrea is the user experience research lead on the Central Accessibility Team. She previously worked on Google Apps and Localization. Prior to Google, she consulted for startups to Fortune 500s in the US and China, and had worked in non-profit strategy, journalism, and PR & communications. Andrea has a bachelor's in psychology from Skidmore College, and a master's in human factors in information design from Bentley University.View the profile
About the talk
Learn about a process any team can use to design more inclusively for people with accessibility needs and how Material Design guidelines, tools, and components can help.
Hi everybody. Thanks for coming. We're really excited to have you all here today. My name is Jen Devin's I leave the user experience team for Google accessibility and with me I have Andrea want she's a researcher on accessibility Catherine ideal who is the 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 and inclusive design and accessibility. I'm 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 some Basics what is accessibility inclusive design and why it's important. As described by the web accessibility initiative accessibility usability and 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.
What 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. That's some of the guidelines we think about with accessibility such as clear color contrasts or clear concise writing are useful not only to users with disabilities. But also those that might be there 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 remote locations with low bandwidth or using old technology. Another example is 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 overlap significantly with these areas as well, and that's why we feel like accessibility is a really clear starting point. At this point we could just throw up on the screen check list of guidelines for you to follow to ensure that your
product is accessible and that's a great place to start it. No doubt about it. However, what we 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. How many people buy a quick show of hands take time to reach out and get feedback and input from users, but it's 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 not 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 can be last missing out on a large number of potential users and also miss out on helping existing users who might be in these limiting situation. Okay,
so that's the basics. We got the stage set. Now we want to walk you to more of a case study to demonstrate how to design and develop with accessibility in mind. We're going to eat today. We're going to use our fictional app. It's a travel and Hospitality app called Crane and we're going to use us 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. Material design system, which includes clear guidelines components and tooling
Okay, so to get this started we're going to break it down into four primary stages. We have the finding the product Vision design development and after design framework probably seems familiar to and that's on purpose. We're not here to introduce yet another process for you to follow instead. We see this as a tool kit 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. Text Jeb. Stage one defining the product Vision no matter what your 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 able 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 use my photos? I have actually
met because they want to take photos and then share them with friends and families are posting 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 properly lower body. There's a boy with a broken arm and there's a woman holding a whole bag of groceries last 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 as down raise your hand if you think it's the boy. acute and lastly raise your hand if you think it's the woman so if your razor has 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 one with the groceries. 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 that we
might think. and often when something doesn't work well for a user with no disabilities that pain point is Amplified for people with disabilities and that's actually good news for you because it gives you much Clear 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 a fact we found with our studies at Google all users of the same core needs because they're all trying to be no meat the same gallbladder is sending a
photograph email buying cryptokitties, 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 talking to users. If you are that's actually think 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 technology that they using in the context of use. So, for example, you'll be asking say how do you use versus 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 knees. The bonus here is the answers May Inspire new ways of interactions. They've never thought of before. Or maybe you're past that stage ready. That's fine right now your testing a low Fidelity like paper prototype. That's fine. You can still test people disabilities. Let's say you're testing with a user who was blind and uses a 3 meter which is an assistive technology that reads aloud the concept of the screen. So you're doing
that but you don't have a screen reader friendly photo time. You can do it here though is write a script of what the screen termite 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 I walk through the user flow during a study session. by integrating people with disabilities whenever you're talking to people without disabilities automatically ensuring that their viewpoints will be included and part of the process throughout the entire design and development phases.
Along with understanding user needs you need to have a general comprehension of a set of Technologies and the different tools that people may use to interact with your product. Trying the Technologies yourself is a great place to start. The best way to learn is to observe the real experts. Those are the people who use a 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 a fictional app crane will walk you through designing a great keyboard navigation model. Starting with a keyboard and navigation model prints are very good foundation for you when building for other Technologies, which we won't go into hair. You may be feeling a bit overwhelmed right now and how
to design to me all those needs. But the great thing about design inclusively is that people and teams have been working for years to understand. What does that include lovely actually means? I should mention Michelle design components includes accessibility guidelines baked right in that anyone can follow regardless of the size of your team. Doing the right thing about is it 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 a few
months ago working age people with disabilities in the u.s. Alone how 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 also use your product to interact with them or you know, they may just simply appreciate the 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 8 trillion dollars. Think about that. Okay, that was a lot of information. So let's go over the important point to keep in mind one talk to people disabilities to inform your pocket edition 2. Learn assistive Technologies from the experts and three build a better experience for all users and potentially capture market share. Now I'm going to head over to Catherine who's going to go over stage 2 design. Thanks, Andrea. Now that used to find your product Vision it's time
to design your at 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 it design challenge together using or fictional at crane to learn how to do this. Crane is a travel and Hospitality app the lets users fuk 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
wireframes and your sketches 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 now, so it's easier to reach for people with motor disabilities, especially for people with ls or a traveler on a bumpy train.
So we sit here is that we place the check boxes right next to the labels. It's just a better experience for everyone. Enchanted Enchanted interaction design. You can also have a huge impact on all users by thinking about the tab interaction model meaning a great keyboardist. Here. We have a wireframe on web of the flight search results. Typing on the keyboard allows you to jump from one interactive element on the screen as we can see right here. This will be the default tab experience.
If we didn't design it at all. It would take 94 have stopped to go from point the back button to point B, the filter options. This is a slow experience. So all we can do is actually group major elements together. Like this list is individual slice have stopped to reach point B. And wants you group your big top stop together. Don't forget how to quickly navigate to the smaller elements such as the individual flights and is faecalis the 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 assistive Tech users like Here are some things you can do to make your app more accessible and turns of interaction Design Group your content and your controls together design your table and traction model the air navigation as well now to talk about visual design. Text Katherine. So now that we've laid a good foundation in terms of interaction design. Let's refine our visual now to start with the very Basics.
I'm sure you all have felt the pain of Ewing 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 shapes of purple here that we were exploring for the crane app. So let's apply this going back to her 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 side of user to have electrical experience here. And remember this is going to be better and 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 going to zoom in on how we can add contrast into the text field component. We increase the font weight and color darkness in the text
field 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 a good call to action much easier to spot which is really important because you're trying to get your users to purchase something here. I'm already with a before-and-after. You can see that this is a much better design other than just looking more aesthetically pleasing the Texas more legible. The relative importance of elements is clear and the call to action or a lot easier to spot.
So now your users feeling 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 color blindness might miss this important piece of information and this can be fixed by supplementing any information that's coated in color through other means like icons are shaped. So we're going to check out the material icon site and search for are 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 user. So looks like we can go ahead and use this one. We're going to download it add it to our text field and now there are two ways to understand that this is an era State and this makes it clear for everyone not just users who are color-blind. Before last visual design example, let's look at Focus State an element size on screen. So when users choose a seat in this travel app, it's important that they can select a seat that they want. Nothing know that their selection was successful and on mobile. This means having a touch Target size of
48 / 48 dip or about 7 mm wide, which is calibrated against the size of a don't think of it makes sense. And I'm trying to ensure that your focus is highly visible. You can see it as the 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 components dates and lastly make sure that your touch Target sizes are going to be large enough for people to actually
reach. back over Catherine Thanks, Bethany. I'm back. With writing you have the power to guide all users with accessible on-screen text as well as meaningful all sprintax. They'll be verbalized by the screen reader a screen reader software. This is between you and the application and the keyboard the keyboard move the focus and the screen reader will verbalize whatever has come into focus music sample from google.com. If you heard of it as Google search button because the screen meter automatically reads out loud the label Google search Andy
control type button. Darkrai nap here. We have a check out screen that has several interactive elements, but let's just focus on these four buttons. And remember the screen reader automatically reset the control type. So it's over by these buttons Eyes by 10 by 10 by 10 by 10. That's problematic. We don't know what the buttons look too. And so I cancel order and complete order actions are right next to each other which could lead to Nature user error. Instead we can do it sad
meaningful and concise accessory labels in addition to the default button verbalization. So you can read added previous check out progress cancel order and check out order. Now, we know what each button will do and they won't be a majorette gas of canceling order rather than completing one and vice versa. You Can Be A Champion for screen reader users by writing access to your 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 all that just
happened to you and is a major pain point for users of low vision or someone who wasn'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 the web when a user hovers over seat. They get additional information about that seat and a hover card, but it covers the rest of the screen when magnified to help our
users get back to whatever they're doing considering easy escape hatch such as an escape key shortcut or a close button. Twin sure that your emotions is unaccessible for set alerts for long enough and have an option to easily dismissed then likewise easily escaped over information through a 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 run into any major blockers. He didn't hesitate. Consider running
a year, sick evaluation consist of having a small set of examiners evaluate your app and gets known use of those principles. Otherwise called your ass is so right here. We have 3 or 6 when the material design excessively 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. There's really distinct is your up robust. Does it support a variety of user capabilities? Finally is wrap
specific. Does it specifically support a variety of user Technologies in the ways that the user expects? Let's try this out with crane. So here we have two butts and variations and want to see if it's clear enough for the 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 are six evaluation and feel free to use the accessibility guidelines provided. My material design is not clear and specific. Now back to Bethany on how to develop your app. Thanks, Katherine. So you've moved on to the development stage and you want to make sure that all of those decisions you just made the design stage hole through to the final product. So the first thing you can do is use standard components when designing if
use material components, they will be prevented work well with in holistic design system and they'll be usable and recognizable to your user. If you something non-standard note that you'll process to design the full component yourself as well as marking it out, but the appropriate metadata particularly for screen reader user will need to provide label structure and traversal path. And diviners once will that you can use with Gallery created by Google to help you manage design iterations. I get quick design feedback if use our material theme editor with Sketch, which is a popular
design tool and upload your mocs to Gallery. You will automatically see all measurements or red lines as designers call them. For example, you can see here how large this press text is and make sure the touch Target size was going to be large enough to be possible for people with hand Tremor. You can also use it to communicate back and forth with your team about accessibility markup and any verbalization or you are writing that you might want to do. I 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 House Cable tech should be implemented. And here's the same screen with the large text now rendered directly. You can actually read it, which is great. So engineer's you can keep users with various impairments in mind as a code just as a designer would periodically consider a user with low vision. No vision or some ability challenges and one way of focusing this work. This is schedule periodic bug Bashas and fix it from a
specifically accessibility point of view and there's also number of tools that you can use during development to check your accessibility on web and on Android these include accessibility scanner on Android, which is the app still here, which is really easy to use because it checks your app screen by screen for any accessibility errors and come by the accessibility sandbox during IO to speak to your engineer 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 you scalable text and use accessibility development tools throughout your process to check yourself as you go. Text Bethany. So now I'm going to talk about the last stage stage 4 after development at this point. The bulk of our development work is complete and you're about to Launch. At this time we recommend using a like pre-launch report from the Google Play Store. Some of you may already be using pre-launch report, but the good news is and now
includes accessibility so a blow dryer app to alpha or beta Channel and I'll crawl through your app to identify a number of ways to improve it. Like crashes latency 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 devtools. So inside the audit panel, you'll see a tool called Lighthouse Lighthouse will run about 40 automated tests against our site to check for common accessibility issues when it's finished. I'll give you a
score. Spell pornography like elements and the best part is the link you to documentation with instructions on how to fix those failing elements. And if you're done everything right and Bliss point if you listen to all of us that 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 disabilities often utilize. So make sure you include and help contents 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. I recover quickly when they get stuck. Now that we're here, you're probably going through your metrics your analytics your checking the factors of your launch the user engagement and so forth are hopefully also doing user studies and your measuring satisfaction to see how well your app is ringing see if by everyone at this point include respondents with accessibility needs during all the feedback. This is also the perfect time to stop
and understand what benefits your team has reaped from design inclusive leave from the very beginning. So here do a post-mortem decide what to cut what to keep what to change and apply that your next cycle over time design inclusive legal become second nature to you. Let's go over the main points one check for common accessibility issues with prolonged report and Lighthouse and countless other tools out there. Make sure you have accessibility help content that's accessible and get feedback from users with disabilities. And Jen. Rise all this for us.
Thank you, Andrea. All right. So there you have it or toolkit 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 in your 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 organization nationally and internationally that you can reach out to and I'll often put you in contact with their members and in fact today and it design and accessibility sandbox across the way there are members from the national Federation of the blind that are willing and I'm wanting to give you feedback or just answer your question. If you're in the design stage, you probably started working on your interaction workflow model and you're thinking about it. Haven't drafted before you get too far. Take a step back and think how would a user
that using just the keyboard go through this interaction model. How would they get their task 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 test and they're familiar to users which is great. You don't want users to have to relearn their app or east for each screen. And finally, if you're nearing that finish line and it's after development just as Andrea mention. We really recommend ensuring that you have
accessible onboarding and help content. And if it makes sense for your apps to have accessibility focused tutorials and onboarding material. Mason's making inclusive product is critical. We all have the power and responsibility to remove barriers and Empower all users to be productive and connected. Thank you so much for your time.
Buy this talk
Access to all the recordings of the event
Buy this video
With ConferenceCast.tv, you get access to our library of the world's best conference talks.