Understanding UX/UI Design for Accessibility: Design an accessible web page! | Michelle Chin | Skillshare

Understanding UX/UI Design for Accessibility: Design an accessible web page!

Michelle Chin, UX Designer, Founder - exploreUX

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Lessons (50m)
    • 1. Introduction

      1:44
    • 2. Accessibility Basics

      5:04
    • 3. Class Project

      0:58
    • 4. Navigating with Motor Skill Impairments

      8:37
    • 5. Navigating with Vision Impairments

      14:03
    • 6. Comprehension of Visual Elements with Color Blindness

      5:01
    • 7. Comprehension of Visual Elements with No Vision

      5:34
    • 8. Comprehension of Text with Cognitive Impairments

      3:27
    • 9. Comprehension of Audio and Video

      4:33
    • 10. Final Thoughts

      0:49

About This Class

Sometimes when you hear terms like “accessibility” or “accessible design” you may feel intimidated. You may have googled “accessibility,” but found the resources were complicated or hard to understand - and you didn’t know where to start.

In this class, we’ll break down the different aspects UX/UI designers need to consider when designing for accessibility. Through activities and examples, you’ll get a sense of the different types of impairments and assistive technology (AT) to help people navigate sites and apps. We’ll go over what tools and techniques you can use to help make your designs be more accessible. This class is great for those who are starting in UX/UI design, as well as seasoned designers who want to know more about accessibility.

For the class project, you’ll be able to practice some of the tools and use the techniques to design with accessibility in mind.

By the end of this class, you’ll be able to:

  • Explain different types of impairments and how it affects people’s abilities to navigate and comprehend a site or app
  • Explain how people can use assistive technology to help navigate and comprehend a site or app
  • Use best practices and tools to create accessible user experiences

Before you know it, “accessible design” won’t feel intimidating and will be part of your natural process!

Transcripts

1. Introduction: Hi. Welcome to understanding you X you I designed for accessibility, design and accessible Web page. You might be checking out this class because you have an interest in accessibility where you need to learn about accessible design but aren't quite sure where to start. Well, you've come to the right place. My name is the shell shin, and I'm a user experience designer, and I have over 15 years of experience working with accessibility. I'm actually originally from the Washington D. C. Area, where many of the products I worked on were government related and had to actually be accessible. I've posted workshops on accessibility and have talked colleagues about it. In general, I love helping people learn how to be more inclusive with their designs. In this class, I'll break down the different aspects of a user's experience the designers need to consider for accessibility. You'll get a sense of the different types of impairments and the types of the system technology to help people with those impairments, you'll see what tools and techniques you can use to make your designs more accessible, and lastly, you'll learn you XY y best practices for creating accessible designs for this class. You should have at least basic you XY y Web design skills. However, you could be a beginner to a seasoned professional understanding. Accessibility is an important skill for everyone. For the project. No design. A webpage with accessibility in mind. I encourage you to work on your project alongside the lessons. This will give you a chance to try the tools firsthand. I also highly encourage you share your progress with the other students and ask questions along the way. You often learn a lot more and confined inspiration and other people solutions. I look forward to seeing your progress and answering your questions. Are you ready to start? Let's begin. 2. Accessibility Basics: before we jump into designing for accessibility, I'm going to talk a little bit about the basics of accessibility. And in this lesson, I'll go over what accessibility is, why it's important and the different types of impairments and how you have the U X Y designer can approach designing for accessibility. Accessibility is the design of products such as websites and APS, so they're usable regardless of a person's abilities. So at its core, it's really about making sure your website or APP is designed to be inclusive. According to the World Report on Disability by the World Health Organization, in 2011 more than one billion people in the world have some form of disability. That's about 15% of the world's population, or three times the entire population of the United States. The report also states that between 110 and 190 million people have very significant difficulties functioning. If we designed with accessibility in mind, many, many people can benefit from our sites and products. There are three types of impairments permanent, which is an impairment that remains indefinitely, and some examples of that include blindness, a missing limb, traumatic brain injury, or arthritis temporary, which is an impairment that is short lived. Some examples include Ah, broken arm, a hand injury or impairments from surgeries or medical treatments. And lastly, there situational, which is an impairment that's caused based on the situation you're in. And some of those examples might include a noisy bar, and you can't hear the TV where you're trying to use your phone in bright sunlight. Thes and parents might hinder your ability to navigate websites or comprehend content on them to help understand what a disability is. I'll read this quote from the U. N. Convention on the Rights of Persons with Disabilities Preamble. The preamble mentions that disability is an evolving concept and that disability results from the interaction between persons with impairments and attitudinal and environmental barriers that hinders their full and effective participation in society on an equal basis with others. So what does that mean for U Ex? In terms of a user's experience? The disability is that interaction between a human and the computer when someone can interact with the site or website, the disability lives with the experience itself and not with the user. As a U. X Y designer it's our responsibility to remove those barriers so that regardless of your impairments, you can access the site or app. Next, I'm gonna talk a little bit about how we designed for accessibility. When it comes to designing for accessibility, there are standards available that you can follow. You might have heard about Section 508 and this is a section of the Workforce Rehabilitation Act. It specifies the requirements for accessible information and communication technology or I C T. It's a regulation that each federal agency needs to follow if your cider product is used by the government and more than likely needs three Section five away conformance. In January 2018 the Section five weight refresh guidelines went into effect. These standards include guidelines to keep up with our ever changing technology, and it maps back to a CAG two point. Oh, another standard is the Web content Accessibility guidelines or what? CAG 2.1. It's a non government standard. Instead, these standards for Web accessibility are set by the World Wide Web Consortium, or W three C, and they were recommended by the consortium on June 2018. The CAT guidelines have three levels of conformance most criteria, and the guidelines have only one level of conformance. But some criteria have multiple levels for the criteria. With multiple levels, you can think of the levels this way. A, which is a baseline. Think of it as a C passing grade in school, Double A is a better level of accessibility, and Triple A is the highest level of accessibility. But in most situations, aiming for Double A is sufficient enough. In a typical process of creating a website or app. There's the design work. Then it's coded and finally, it's tested. The process of including accessibility isn't just a responsibility of designers. Developers need to ensure their writing accessible code, and test engineers need to do their due diligence to confirm that the site or product is accessible. However, our role is to proactively designed with accessibility in mind to make the process of implementing accessibility easier. The very basics of our role as a U. X Y designer is to ensure that users can navigate the site and comprehend its contents. For this course, I've split the lessons out by navigation and comprehension. Each lesson builds on information from the previous one, so I highly recommend you watch each lesson in order. If you want to read more about the accessibility guidelines and basics, check out the resource is Section I provided some helpful links there. 3. Class Project: the project for this class is designing an accessible one page website about your favorite food. You won't be coating the Web page, but you'll be creating the design as you designed the page. You'll get an opportunity to try some of the tools and apply accessible design techniques. I encourage you to start with a rough design of your one page site and then generate on the design after each lesson. This way, approaching accessibility won't seem so daunting for this class. You'll need Sketch, Adobe Illustrator or Adobe X'd or some other Web design software that you're familiar with . There are some other tools, and resource is you'll need, and I'll include those in the project. Resource is area you get set up right away. As you reiterate on your designs for class, don't forget to post your work. Ah, big part of understanding Accessibility is seeing the content before and after a Tuller technique was used and seeing how others approached their design solutions for accessibility 4. Navigating with Motor Skill Impairments: before we jump into navigating with motor skill impairments, I want to talk a little bit about navigation in general, so navigation is the process of moving through this site. For example, if I'm on online shopping site, I'm navigating through the options for shoes and the actual step by step process of purchasing those shoes. Navigation is also about orienting yourself with where you are on the site and where you are within a page on that site. For example, if I'm on online news site, I'm able to locate the main navigation. The main headlines in the Footer Navigation navigation can be affected by both motor skill impairments and vision impairment. In this lesson, I'll go into what some of those motor skill impairments are and how to make sites accessible so they are no longer a barrier. Motor skill impairments inhibit the usage of some tools and gestures. Some examples of motor skill impairments include cerebral palsy, arthritis, carpal tunnel or fractured fingers, to name a few. The's impairments could make using a mouse or keyboard difficult. For example, if my finger was injured, it could be difficult to use the buttons on my mouse or type at a normal pace. Motor skill impairments could also make using a mobile device challenging. For example, if I broke my thumb, texting wouldn't be as easy. And neither would using some gestures, like pinching to zoom to help people with motor skill impairments. There's a variety of assistive technology available. Assistive technology is sometimes abbreviated or referred to as a T. Some 80 includes a special mouse, a special keyboard or only using a keyboard. For example, If a user only uses a keyboard, they might use the tab key to navigate to various elements on the site. I'll go into more detail on how that works in a little bit. Websites can also have 80 friendly features, which makes using 80 on their website much easier. Now let's look at examples of using only a keyboard to navigate. First, I'll walk you through a site that's difficult to navigate, and then I'll walk you through a site that's easy to navigate. So now I'm going to try to navigate the Home Depot site, using only my keyboard. Something hit Tab and it looks like I'm along the top header, and now I am in the search. But I can't seem to find where I am right now. And back on my account. I'm trying to get to the main now. Gonna try to look for mirrors. So I think it's under home to corn furniture and hit Enter. And now I guess I get to go into the menu. Looks like I'm still at the top Now. Sets a little frustrating. Now, I don't know where I am at all, and I keep hitting Tab. Um and I still don't know where I am, and I can't find myself. Okay. It looks like I've made it to the secondary now, and I want to go into the menu that I just open, but I can't seem to get there. OK, Looks like I was able to get there, but it just took a really long time. I wasn't expecting to go through all the other navigation items. Now let's take a look at another site here. I'm gonna look at the ari i dot com site, and I'm gonna look for carabiners. So right now I'm having through, and I'm at the Petr, and now I'm on the search and I can see where I am. So now about the May now so good to climb and right away when I open the Climb menu, my navigation points are inside that climb menu, unlike the Home Depot site where I had to go through the rest of the navigation. So it is a little bit more complex because it is an e commerce site and there is a lot going on. But at least it was fairly easy to find what I was looking for. Pause the video and try looking at some of these sites on your own, using your keyboard Onley tab around the site and see where you end up. Can you see where you are? Are things selectable? Are things impossible or frustrating? Consider this is what keyword only users have to deal with. What's nice is that with the more common accessibility becomes, it's harder to find sites that aren't keyboard friendly. And that's a great thing. This is a quick note if you're using safari. If using safari, you have to enable the accessibility control, or you won't be able to tab around in safari, access your preferences, then go to advanced, then go to accessibility and check the box that says pressed have to highlight each item on a Web page. This will ensure that as you hit the tab key, it will go to the next item on the page. In this example, information that's revealed when you hover over an element should also be keyboard friendly . So go ahead and look over in this front of my sight. And they have these tool tips where you can hover over and learn more information about that specific items. So let's try. Using anarchy were only and having to those tool tips to see if we can access the content. So it looks like I'm having through the buttons and it went just down to the page so it doesn't seem like the tool tips air keyboard accessible, which can be really frustrating if you're only we have navigating is through a keyboard only. So now look at flax pricing page, and we can see they have tool tips as well, and you can hover over them. So let's see if we can navigate to them with a keyboard only, and it looks like it looks like we can, which is really nice. So this is great, because now you can access tool tips with the keyboard only and get that extra content. Mobile devices have 80 friendly features, so people can modify default gestures and replace them with alternate commands. I'll show you a quick demo here of an alternate method of pinching and zooming on the iPhone. Typically, you can use a pension zoom gesture with your thumb and your index finger to pinch and zoom in and zoom out of your screen. But if you had a broken thumb, it's really difficult and almost impossible to do so. So instead, you can use the assistive touch feature, which allows you to do the pension zoom gesture with only the use of one finger. Let's look at some techniques for designing site so they're easier to navigate. You want to make sure people can navigate in a logical order on Ari, I cite. You can predict where you'll be tabbing to next. You also want to highlight the item that's in focus so people know where they are in the site. When you have a large navigation, consider providing navigation skip links. These were the first links on the site where people can select them to jump to their desired section. This way, they're not having through several items. Every time the page loads, they only display when tab to so they don't disrupt the you. I, however, elements should also be keyboard accessible. This is an advanced technique, but you can provide keyboard shortcuts. Keyboard shortcuts are key combinations. People conflict. To perform an action, Gmail has a list of keyboard shortcuts you can use to see this hit shift. And the question Marquis. If you decide to create keyboard shortcuts, make sure they don't interfere with screen reader keyboard commands. What's nice about these keyboard shortcuts? Is there also great for power users because they can use these commands to work quickly? Let's look at some techniques for designing sites so they're easier to navigate and easy to create. Document is a navigation order document. This document shows how someone should navigate through the design here. I'm taking a design on my Web page, and I'm adding annotations to the navigation order. I try to make the order logical. I highly recommend collaborating with other designers, developers or accessibility experts. Been sure the document works for all parties. Another tool you can try is prototyping. Some of your designs. Working with a developer, get some of the interactions coated so you can see how navigation could work. Other tools include usability testing, accessibility testing with really end users. It might be difficult to find participants with impairments, but you can simulate what they might need to do. For example, you might ask the participant without using your mouse. Try ordering food on the site. Validating your designs is important to ensure good user experience. Any experimenting and testing you do helps you and your teammates better understand accessibility. Navigation. Now let's talk about how you can apply these tools and techniques to your project. For your project. Annotate the navigation order of your design. Make sure it follows a logical order and doesn't jump around when you're done. Share your delivery ble. Also share your process on how you approach navigating your page and don't hesitate to ask if you have any questions. 5. Navigating with Vision Impairments: as we learned in the last lesson. Navigation is about moving around in the site but also knowing where you are. In this lesson, I'll go through some of the vision impairments that can affect a person's ability to navigate. I'll also share how you can design an experience that's more accessible. There are several types of vision impairments, but we can group them into two categories. Partial vision, loss and no vision. Examples of partial vision loss include glaucoma or macular degeneration. No vision includes complete blindness. I'll show you how types of vision impairments can affect how people access content on websites. In this example, we're looking at a website with full vision. Now. This is a view that simulates vision affected by glaucoma. In this example, your field of view becomes very narrow. The simulation is only partially accurate. Typically to see more people usually move their head around back to looking at a website with full vision. Now, this is a view that simulates vision affected by macular degeneration. In this example, there are patches where you can't see. The simulation is only partially accurate again. Typically, people move their head to see, but still not very convenient. If you want to simulate either of these vision impairments, you can easily do so with your hands to simulate glaucoma, make a fist with a narrow opening like this, and try reading some websites through that narrow opening to simulate macular degeneration . Just put your palm in front of your view and try reading some websites with the obstruction . Some assistive tech for people with partial vision include a special keyboard screen, magna fires and screen readers. I'll touch more on screen readers In the no vision part of this lesson, a screen magnifier does just that. It magnifies the content of a screen. Sometimes colors could be changed to provide increased color contrast. Most operating systems have a built in screen magnifier. If you want to test them out later, I've provided information in the resource is section of this class. Another vision impairment is complete blindness. People with no vision have to rely on other methods of navigating sites. For example, they might use a screen reader to read them the content of the screen. To get a sense of what that's like, will listen to a phone menu of the North Carolina DnB. Let's pretend that you want to renew a vehicle registration, listen to the clip and think about the relevancy of the content, your orientation in the system and your mental model versus the systems model. Thank you for calling the North Carolina Division of Motor Vehicles. You can now obtain your driver license status, so not police response system. Please listen carefully. Found menu options have changed. Here is a special message from the North Carolina D M V. Planning to catch a flight will visit a military base. There are new idea requirements in North Carolina. That's because the federal Real I D act requires new security standards for building planes and entering federal facilities. The North Carolina you like we need the federal requirement. Learn how to obtain your real i d. At N. C. Real. I do dot gov to schedule an appointment to get you realize t press nine. Otherwise, press one to continue thing menu For questions about your driver's life in press one or say license for insurance Press two or say insurance for license plates, property taxes entitled dress three or a vehicle for office locations prepped for or say locations for all other DMG Services Press five, forcing other to repeat it for the international registration plan, press one or, say international license, Invest trust to or say, theft traffic records. Press three or say crash school bus in traffic safety, Press four or say safety. To repeat his menu, press nine or say repeat to return to the main menu, press the pound key or, say main menu for operational assistance. Press zero or, say, operator, were you able to figure out which selection to make? This is actually a task I tried to accomplish several times, and I found it so frustrating. I almost decided to physically go to the D. M. B. Maybe as you listened, you thought about how much easier this would be if you could just see where to find it on the website, and it probably would be. But this is an experience that non sighted users would have on a daily basis, and that's why it's important we designed site so they could have an easy time navigating through them. People with lower no vision often use screen meters to navigate websites and APS, a screen reader, is an app that reads the content on the screen to the person. The screen reader also read some of the code to help them interpret the context of what they're listening to. For example, if the screen reader is about to read a bulleted list, you'll let the person note this is a bulleted list of five items, and then I'll go Alan to read those five items. Additional assistive tech includes accessible, friendly code. Such a semantic elements in aria attributes, combined with a screen reader thes help users understand the context of that site. There are several screen readers available when you have time. I encourage you to try at least one and see how it works. For Windows, there's Envy D A, which is free. There's also Jaws, which is one of the most widely used screen readers available, and you can try a free demo of it. Lastly, there's narrator, which is included in Windows. When trying narrator out, I didn't have much luck. I recommend trying out and VD a or Jaws instead. Mac OS and IOS includes voiceover for their screen reader. Android Screen Reader is called Talk Back, and it's included in the system as well. Let's listen to a screen reader in action. This is voiceover on a Mac. It's going to read the a far sight voiceover on Thrown Off Our Travel magazine and guide Google Chrome Window off our blank image slash net link. Now I'm going to navigate the site. Most people don't read a website from start to finish. Instead, we usually skim a page. You might skim headlines and dive deeper into a subheading of interest. People who use screen readers read the same way. They don't want to listen to an entire page from start to finish, but they're looking for something to help with that screen. Readers can often jumped a headings, and then I couldn't navigate to a heading of interest semantic elements in HTML R elements that have meaning associated with um. Some examples include the form tag for a form, the table tag to indicate a table and an H one tag for heading level one. Screen readers pick up on these elements, which help the user understand where they are and what they're listening to. Some examples of non semantic elements include the DIV tag and the SPAN tag. Other accessible, friendly code includes Ari attributes Aria stands for accessible, rich Internet applications. And these attributes encode our components that help make the rich. Web experience is accessible. Some core components include, but are definitely not limited to roles like maybe in the Navigation content search and so on. Properties and States screen readers pick up on these attributes, which help the user understand where they are, what's going on and what they're listening. Teoh. This is a visual guide To help demonstrate how aria attributes work, Aria attributes label areas of the screen to the screen. Reader can relay this information toe listener to provide context. When I turn on the area landmarks, you can see how the areas are identified. For example, this is the banner. This is a navigation, and this is the main content area. In this example, there is a guide on how heading levels are identified again. This is just a visual demo on actual sites. This markup is behind the scenes and not visible to the end users. Let's put this together an example. You'll need a pen and paper for this activity. I'm gonna play to audio clips. The first of the screen reader reading a website that was created with non accessible code . The second clip is the same website created with accessible code. As you listen to the first clip, try and draw a wire frame of what you're hearing. The US Daily News trending news family and Indiana finds a living dinosaur. Late yesterday, a family visiting a local playground discovered a living T. Rex and Liverpool, Indiana Trending news, Sports entertainment. Okay, now I'm gonna play the second clip. This is a screen reader reading a website created with accessible code. As you listen to this clip, try to draw a wire frame of what you're hearing. You are the USA Lee News Web content heading Level one link The US Daily News list. Three items link trending news link Sports link Entertainment heading level to local news heading level three Family and Indiana finds a living dinosaur. Late yesterday, a family visiting a local playground discovered a living T. Rex and Liverpool, Indiana. How did listening to those clips go? Was a second clip. Easier to understand? Depending on how your website is coated, it could be easier or harder for someone relying on a screen reader toe. Understand the content. That's why it's super important that could be written in a way that helps a screen reader provide that right context. Toe listeners. Now let's take a look at the website. The two audio clips described. Here's what the actual websites look like. They actually look exactly the same. Did your wire frames generally resemble the site In the second clip, Semantic code and ari attributes were used. This help the screen reader identify elements so you can get the context of the information being read to you. What's important to notice is that you can get the same exact display, but with two different sets of codes. So really using accessible code has no effect on the outcomes of your site. Here are screenshots of the code used to create the sample website. The one on the left is a non accessible coat. The one on the right is accessible code and include semantic elements and aria attributes. There are a few techniques you can use when approaching. Solutions for navigating their 1st 1 is to determine the navigation order of your site, which is what we discussed in the lesson about navigating with motor skill impairments. Not only does that help for motor skill impairments. But determining how someone should navigate the site also helps those with vision impairment. I encourage you to work collaboratively with your design and developer teammates to determine which Ari attributes work best. Developers might have a good idea of what Ari attributes exist, but it's up to you as a designer to determine which one provides the best user experience. Determining information hierarchy is another technique to consider early on. Started in a find, the heading levels heading levels go from H one to H six. Typically, the H one heading level is only used once, which is for the main title. As you determine the pattern for your heading levels, you can document them in a style guide for easy reference. And lastly, as you design, make sure to provide a consistent experience. As people visit your site, they form a mental model in their head. For example, after using a few pages, they might know the order of items in the main navigation. It helps them figure out your site and access content quicker. However, if you change things up in the navigation, it disrupts your mental model and becomes confusing. Similar to that you want to make sure you're not skipping, heading levels on a screen, for example, you don't want to have an H two and then immediately follow that with an H, for the listener will wonder what happened to the H three and if somehow they got lost on the page again, a tool you can use the navigation order document. In addition to including the order, you can identify any aria landmarks to help the navigation. I highly recommend collaborating with other designers, developers, accessibility experts to ensure that the document works for all parties. As with other lessons, you can try prototyping some of your designs or try usability or accessibility, testing some of the interaction By listening with a screen reader, you can get a sense of how well things work. You can ask yourself, Can people really navigating accomplish tasks? Does the flow meet? User expectations is a redundancy when listening to a screen reader. Another tool you can use to help simulate vision impairment is a no coffee vision simulator . It's a plug in available on chrome and Firefox. You can turn on and off different simulations of impairments to get a sense of what your site looks like I don't generally use this to do design work, but it's a great tool to simulate scenarios to help build empathy. The Wave Tool is an accessibility checker for Web developers. You can try it out by going to wave dot Web name dot org's. It's a good way to see if you met accessibility criteria for your site. It's available is an online tool and a chrome and Firefox extension. Since we should be designing with accessibility in mind, this tool serves of the checker. After your design has been implemented this way, you can see anything you or your team might have missed. You can try using those of a baseline audit of your site. If you're trying to identify where to start incorporating accessibility for your Web page design indicate the heading levels and aria landmarks you might have. It's at your discretion for how you want to identify them. You can follow my style or come up with your own. The goal is to make sure your teammates can understand what annotations you've made. Once you're done, share how you've marked the heading than Aria landmarks. Sharing is a great opportunity to see and be inspired by how others air communicating this type of information 6. Comprehension of Visual Elements with Color Blindness: in this lesson, I'm going to talk about how color blindness can affect the comprehension of visual elements . I'll go through techniques that you can use to make your designs more accessible, and I'll talk about some tools that you can use to make your job easier. With color blindness, a person has a lack of ability to see certain colors, which means they're color. Spectrum is narrowed, and what that means is that they might have difficulty identifying items by color or might have difficulty distinguishing items from a lack of contrast in colors. I'll go ahead and show you some examples of how it can affect what people see. The example on the left is what the Marshmallow Peeps site looks like with unaffected vision. Example on the right is what the Marshmallow Peeps site looks like. If you have tried to know Pia with that example, it's almost impossible to help the yellow peeps from the Pink Peeps. Color contrast is a difference between two colors. In this example, the Yellow Peeps don't have enough color contrast with the pink peeps. When the color contrast isn't high enough, it could be difficult to distinguish the different items Let's look at color blindness issues in terms of a user interface element in this example, which toggle is in the on position with unaffected vision? You can tell it's the bottom one, and that's because it's green, which is usually an indicator of a non state. Now let's look at the same example as if you had a chrome atop CIA color blindness. In this example, it's difficult to tell which toggle is on because both of them are the same color. And this is why it's really important to avoid using Onley color to differentiate you elements. This is especially true for elements that are important, like the ones that can affect privacy or security. Now I'll talk about techniques you can consider when designing with color. First, you want to provide enough color contrast for elements that users interact with, for example, buttons, menus, error messages, headings and so on. Well, CAG 2.1 states that for a level double A, the contrast ratio is required to be at least 4.5 to 1 for normal text and 321 for large text. Large text is considered to be at least 14 point and bold, or at least 18 point in size for level Triple A. The contrast ratio is required to be at least 7 to 1 for normal text and 4.5 to 1 for large text. Another technique is using more than one visual treatment to distinguish an element. For example, in these banner messages, the color context is not only indicated by color but also by symbols. Let's visit our previous U example with the toggle switches here, we've added another visual indicator to help the user distinguish which one is on the one with the Czech means it's turned on, and the one with the X means it's turned off. Even if you have color blindness now, you can determine which state is on or off. Now I'll talk about some tools you can use to help ensure proper color contrast. One tool I like to use is a color contrast analyzer. It's a standalone app for Windows and Mac. It's available for free at the Paciello Group's website, and I'll do a quick demo of how this tool works. It's fairly simple, so what I'll do is I'll open it, and I just have to pick a foreground color. In this case, it's the great text, and I'll just use the eyedropper tool. Pick the great text and then I'll pick the background color, which again I'll use the eyedropper tool, and that's that pale green. And then I'll see that I have failed all levels of color contrast. I can also use this tool to figure out which colors I can use to make the appropriate level of color contrast. So go ahead and pick this blue and I'll change the text to a black. And here it says that I have passed all different levels of color contrast requirements. Another tool I like to use is the stark plug in, which is available for Sketch and Adobe X'd. It's available for free at Get Stark dot Co. I'll do a quick demo of how Stark works in sketch for the stark plug in. All you have to do is select two layers, so I'll select the text in the background. We'll go ahead and go to plug ins, stark and check contrast, and there will give me the results of the color contrast, and in this example, I've failed all levels of color contrast, it's what I can do here is just keep adjusting the colors until I get the colors I want and pass the contrast levels that I need for your project. Use the color contrast analyzer and check the color contrasts of elements in your design. Do they meet the minimum requirements? Aim for a passing rating for work AG 2.1 level double A. If the color is don't pass, what would you do to change them When you're finished, be sure to share your before and after designs and tell us your approach to changing the colors. 7. Comprehension of Visual Elements with No Vision: in this lesson, I'm going to discuss how having partial or no vision can affect a person's ability to comprehend visual elements. I'll also go into assistive technology available to accommodate these impairments, and I'll walk you through some techniques you can use to provide an accessible experience. When you have partial to know vision, you might not be sure what's displayed on the screen. You might Onley rely on a screen reader. If the content can be detected by the screen reader, you might actually miss key information. Next, let's try this new vision simulation. I'm going to display a black screen to simulate that you have no vision. Oh, so good. That was hilarious. That was great, wasn't it? Did you enjoy what I saw right in the simulation you weren't able to see, so you didn't experience what I did. And that's what it's like. If a site doesn't provide alternatives for people to access content just so you don't feel left out, I'll show you what I found funny. Here's what I was laughing at. It was a gift of a sloth falling over. Now we'll talk about the available assistive technology to help make visual elements accessible to people with partial to no vision in combination with screen readers. Alternative text for all text for short is the main assistive tech available. All text is simply a text description of non text content. Screen readers read the all text to users so they can understand what's being displayed. I'll play this video clip of a screen reader reading all text of images. Link Image BMO Drea M. O. You are currently on a link inside of lead content to click this link Link image. My team age I swords double trouble in Mirror Castle. No screen reader isn't 100% perfect. For example, it reads be Modry MOAs BMO Drea M O. But listener can at least get a just of what's going on. Let's go over some techniques for writing helpful all text for all text. You want to keep it to 60 to 80 characters and link. You can also leave out image of in your all text screen. Readers can detect when an image is presented and they already include image of If you include image of in the all text, it becomes redundant when writing all text. It's important to only describe what's necessary. Always ask yourself what is the intent of this image? And keep in mind that the intent isn't always the literal meaning. For example, enemy to give or sloth. If you have more complicated images, you can consider using the long description attributes or providing a full length text alternative. Now I'm gonna show you an example of a full text alternative. Here's an infographic from Dick Use website. Do que also happens to be inaccessibility company. At the top, you can see the full infographic. This image has a lot of content, which is too much to put inside oven all text. So if you scroll all the way to the bottom, you can see a full text alternative. This way. Anyone relying on a screen meter can get the same information as someone who is cited. Sometimes it's easier to understand how to write all text by seeing good and bad examples. In this example, we have a website for beginners yoga class, and the image of the sloth needs, um, all text. A good example is animation of a sloth trying to do yoga but falling over even though it's not 100% accurate it carries. The intent of the image about example is just sloth. While it's true, it's lacking context, another bad example is just animated GIF. This is also true, but it provides no valuable context and, lastly, another bad example. There's a sloth covered in algae on the street. He is stretching, but he falls over. There's a car behind him. There's a label that says, Make a gift dot com. While this is very accurate, it's still not providing the relevant information to the listener. Additionally, all this information is noise, which can contribute to cognitive overload for images that are more complicated. It's best to summarize the intent of the image and not go into intricate details in this screenshot from Bitcoin site about Bitcoin's value. Ah, good alternative description would be. Bitcoin's value has steadily increased since June 2017 but picked up December at over $19,000 each. It sharply dropped in February 2018 to roughly half that value. This captures the essence of what you want the reader To get from this image about example of a description would be something like on June 1st, the value was 2100 on June 2nd, the value is 2101 On June 3rd, the value was 2200. I won't go on, but I think you get the point. If they intend us to show the gist of what happened, it's not necessary to get super granular. In cases where images air only for decorative purposes, you can omit all text altogether to help streamline things a bit. If you have a design system or component library, make sure you document the all text there. This way. You're not always annotating your designs with all text for every reused image. Another note S P G's can have all text to, and emojis can be read from some screen readers. So don't feel like you're limited or can't have fun to make things accessible. Let's go over how you can apply some of these techniques to your project. For your project. Try your hand at writing the all text for your images when you finished post your work to share with others, sometimes understanding how to write good all text comes with viewing lots of examples 8. Comprehension of Text with Cognitive Impairments: in this lesson, I'll be talking about how cognitive impairments might affect reading comprehension. They don't walk you through some writing examples as well as techniques and tools you can use to improve your writing for accessibility. At the end of the lesson, I'll talk about what you'll be doing for the text on your project. Some examples of cognitive impairments include traumatic brain injury, side effects from chemo treatments and reading in a second language. When people have cognitive impairments, they might have difficulty understanding information. Sometimes when information isn't provided in an easy to understand manner, they can suffer from cognitive overload. This means it's too much for the person to process. This also goes for people using screen readers when there's too much information to listen to. It's hard to parse through what's important and what's not important. Now let's look at an example of some content in its original state, where it's not easy to read. Then we'll look at how I revise the text that reads much easier. Here's an example of a pizza recipe where you can see the content is difficult to read. It's in one big paragraph, and you really have to figure out how the content is organized. In the example In the right, I reworked the content to. It's easier to read. Readers can easily find the ingredients and follow the instructions. Let's look at some techniques for writing easier to read content. One technique is writing in plain language when possible. Plain language is writing where readers can understand information easily, quickly and completely as possible. Writing in plain language reduces cognitive load on the reader. It also makes a content easier to translate into another language. This is especially important if your site or product has to support multiple languages when writing. Aim for a great level based on your users. However, even if your audience is technical in nature, writing in plain language makes things much more easy to read, so it's helpful for everyone. Another technique is organizing the information in an easy to read format. When writing in plain language, make sure you use headings, use bulleted or numbered lists and keep her sentences concise. When you organize the information, it's easier for people to scan and consume the content. Let's dive into a few tools to help you simplify your writing. Plain language not go. This is a website that supports the Plain Writing Act of 2010 which requires federal agencies to use clear, understandable language for public communication on the site. They have guidelines with Do's and dont's, as well as several examples to help you understand the writing concepts. Another resource I highly recommend is a Hemingway up. It's a lightweight tool to help you make your writing clear and concise. It will highlight long sentences that you will need to simplify, and I will make some wording recommendations. What's nice is that it also summarizes your reading level. Another app. People uses Graham early. It's similar to the Hemingway up, but provides more details. If you want more assistance with grammar, I recommend using this one. Now let's talk about how you can apply these tools and techniques to your project for your project. Work on making the text on your design easy to read. Write the text as you normally would been. Copy and paste the text into Hemingway or Graham early and see how well it reads Wordsmith attacks until it's easy to read for this project. Aim for eighth grader lower when you're done. Share the original text and your revised text. Sometimes it could be fun and even eye opening to see how much better, the revised text reads. 9. Comprehension of Audio and Video: in this lesson, I'm going to go over how hearing and vision impairments can affect a person's ability to comprehend audio and video. I'll review the assistive technology available to accommodate these in parents, and then we'll talk about the things you can do to ensure your media It's accessible. Complete blindness is a vision impairment that can affect a person's ability to comprehend video. For example, if the person can on Li listen to a movie, they might not get the full context without seeing the visuals with hearing impairments, People can't hear the dialogue, the sound cues or the music that sets the tone. Other impairments that can affect a person's ability to comprehend video include being in a noisy environment. For example. You're in a noisy bar and can't hear what's being said on the TV. Another example is you're watching a foreign language film and you don't understand the language so you can't understand what's going on. If users air hearing impaired, you can add closed captions to videos. Thes captions appear at the bottom of the screen and display and sink to what people in the video are saying. Let's take a listen to this YouTube clip, and you, too, you can turn on or off the captioning. So, uh, let's get from it in harmony Chickens. Can you? Can you keep it down? You guys mind at all? We look like a bunch of pack of velociraptors on ted dot com. They have interactive transcripts of their talks. As a speaker talks, the transcript below highlights the words so people can follow along. Let's take a quick look at how this works. I live in South Central. This is South Central liquor store, fast food, vacant lots. What's also nice is that this is an interactive transcript. You can skin the transcript, click or phrase, and the video will jump to that spot for people who are visually impaired. They can listen to dialogues and sounds and videos, but they can't get the full context. That's where audio descriptions come in. Audio descriptions describe the activity in the video so people can get the context of what's going on. Let's listen to the audio description for this video. Are you? He takes the driver's seat. I don't driving. Steve rests his hands at his sides as the car pulls onto the road. The steering wheel. Turning on its own look, Prius rolls down a quiet residential street. Let's go over some techniques and tools you can use to make your audio and video accessible . When dealing with audio and video, You want to make sure you provide alternative methods for people to understand this information in this chart, I've listed out some alternatives based on the type of media and impairment. Just because there's a video, it doesn't mean you have to provide close captioning. If feasibility or budget reasons prevent you from doing so, it's okay to provide another alternative method to access the content. When it comes to creating captions, there are a few best practices you can follow. First, ensure that the transcription is accurate. This includes not editing the content for length or interpreting what someone said. It's your responsibility that the transcript is accurate to convey what is actually said in the video or audio. Next, keep captions a two lines. The example. Images from Netflix. Keeping the captions to two lines helps for a few reasons. 1st 2 lines usually doesn't obstruct the view. Second, it's easier for people to read shorter lines of text. Your captions should display in sync with the dialogue, but it should also display long enough for people to read them. While it's tempting to stay in pace with a dialogue, the dialogue is too fast. Readers might not be able to read everything. If you're providing a description of the video, it should be concise and relevant to give the person enough context. The same best practices for writing all text applies here, too. I'm not too familiar with transcript tools and services, but if you're looking for some quick, inexpensive alternatives, YouTube has a captioning feature which leverages Google's automatic speech recognition technology. When you upload a video, YouTube starts to automatically caption it. It's fairly accurate, and you can easily at it and tweak them in this lesson. Cover a bit about how vision impairments can affect a person's ability to comprehend audio and video. There's no project activity with this lesson, but I encourage you to check out some of the accessibility features in the sights of showed . I've added links to them in the resource is list 10. Final Thoughts: you've made it to the last lesson. We've covered a lot of ground, and from watching these videos and going to the project, I hope you've learned how to think about accessibility from a UFC. Why design perspective When it comes to bring accessibility into your process, start small accessibility doesn't have to be like opening. The floodgates work in phases. For example, the first step might be to ensure that all your images have all texture. It's once that's cover you can. We want to ensuring that all your colors have proper color contrast ratios. Feel free to review the lessons as you work on incorporating accessibility into your design process. Hopefully, by taking this class, those resource is start to make a bit more sense for you. When you get a chance, please review the class and feel for you to follow me on skill share. Thanks again and take care