Accessibility is not a Checklist <br />An Interaction Designer’s Guide to Creating Accessible Interfaces<br />Jimmy Chandl...
#A11Y = Accessibility<br />2<br />
Introduction<br />3<br />
“The principle behind all design is human dignity.”<br />4<br />Richard Buchanan<br />Keynote presentation at Interaction ...
5<br />25%<br />
People<br />6<br />
Checklists?<br />7<br />
8<br />
Does the image have alternative text?<br />9<br />Yes<br />No<br />
10<br />
11<br />
12<br />
13<br />
Accessibility is Not a Checklist<br />14<br />
Continuum<br />15<br />One<br />All<br />
Continuum<br />16<br />One<br />All<br />
Continuum<br />17<br />One<br />All<br />
User-Centered Design<br />18<br />
Process Tips<br />19<br />
Tip #1Iterative process <br />20<br />
21<br />
22<br />
23<br />
Tip #2Design for mobile first<br />24<br />
25<br />Source: and<br />
26<br />
Tip #3Include people with disabilities in your usability research<br />27<br />
28<br /><br />
Tip #4Don’t Assume…<br />29<br />
30<br />
Design Tips<br />31<br />
Tip #5Don’t punish your customers to solve your business problem<br />32<br />
33<br />
Tip #6Get people to drive themselves <br />34<br />
35<br />
36<br />From (Photo credit: Karen Putz)<br />
“It was so cool, like another door had just opened for me!”<br />37<br />Glenda Watson Hyatt, the left-thumbed blogger<br ...
Tip #7Have people define their own time <br />38<br />
Slideshows<br />39<br />
Slideshows<br />40<br />
Tip #8Protect your investment <br />41<br />
Brightness<br />42<br />
Grayscale<br />43<br />
Increased Contrast<br />44<br />
Contrast and Texture<br />45<br />
Grayscale<br />46<br />
Tip #9Create alternative contexts<br />47<br />
Scan this Page<br />48<br />
Tip #10Provide help in an accessible manner<br />49<br />
Help People Recover From Errors<br />50<br />
Help People Recover From Errors<br />Cursor<br />51<br />
Help People Recover From Errors<br />Cursor<br />52<br />
Conclusion<br />53<br />
Take Action!<br />54<br />Include…<br />
Continuum<br />55<br />One<br />All<br />
Continuum<br />56<br />One<br />All<br />
Thank You<br />57<br />Please provide feedback on this presentation:<br />
Accessibility is not a Checklist <br />Presented at Interaction 11Boulder, CO February 12, 2011<br />Jimmy Chandler<br />b...
Upcoming SlideShare
Loading in …5

Accessibility is not a Checklist


Published on

Published in: Design, Technology
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • For people who use twitter, the most common used hashtag for accessibility is #A11Y. Some people believe this hashtag itself is inaccessible, and prefer #AxS or #access or even #accessibility.
  • My agenda today is simple: Talk briefly about why accessibility is important Describe a different approach to accessibility than just using a checklist Provide some concepts and tips on how to improve the accessibility of your products Suggest actions you should take nowDoes what we do as interaction designers and user experience (UX) professionals matter? Or do we just have this job to pay our bills? If what do as UX professionals does matter, then it matters because we can improve people’s quality of life through better interfaces and products.If your goal as a UX designer is to improve your products for your audience, you should include people with disabilities because they are a part of that audience. Not only that, they are people that need better design even more because they are among our most vulnerable.
  • About 1 in 4 of the adult US population live with a disability that interferes with activities of daily living, and are less likely to use the internet and benefit from it. People with disabilities have higher unemployment and poverty, lower levels of education and high-speed internet access.The reason I wanted to talk about accessibility today, and why it’s been a major focus of my career for more than a decade, is because I believe all people should have a chance to improve the quality of their lives through modern technology. And many people with disabilities will tell you how accessible devices, software and websites have had a profound impact on their lives.
  • Accessibility is more about people than about technology, but it’s not just about people with disabilities, it’s also about people with: diminishing abilities as we age people with temporary conditions (such as an injury) and people using different devices (such as a smart phone).
  • Checklists are not bad, in fact they can be quite useful.
  • The problem is when people and organizations think about accessibility merely in terms of a checklist, or as a list of binary choices, such as…
  • Would this pass an accessibility checklist? Hopefully not.
  • How about this one?
  • It would pass if the checklist just asked: is there a wheelchair accessible ramp, yes or no, but didn’t specify…
  • …if the ramp goes all the way to the entrance. So a person in a wheelchair could not actually enter the building on his or her own.Likewise, some people only check to see if images on a web page have descriptions, but they don’t check to see if the descriptions make sense and are useful.Checklists are tools, and accessibility checklists can be useful tools in removing accessibility barriers. But…
  • You should think of accessibility as more of a continuum, where the least accessible product is usable by one person, and the most accessible, is usable by all people.
  • Your product probably falls somewhere in between.My goal is to help you move your arrow…
  • …more towards the “all” end of the continuum.What implications does a continuum have vs. a checklist? It means we don’t have to check every item off the list to be accessible, because virtually no product is perfectly accessible to all people in all contexts. It does mean that every improvement we can make, that gets this arrow moving more towards “all,” is a positive achievement.If we at least do something, we are improving our experiences for at least some of our customers in some contexts. In order to accomplish this…
  • We should take the same user-centered design approach to accessibility as we do with all our target audiences. This means you need to learn how people with disabilities use your product, including any assistive technologies that help them accomplish their goals. Assistive technologies can be hardware like a microphone for speech input or the Braille display shown in the photo, or software such as the JAWS screen reader.Also, in order to create accessible designs, you can’t just follow accessibility rules without understanding why those rules are important.
  • I have ten tips, each with an example, starting with four about process.
  • An iterative process allows you to more cost effectively integrate accessibility into your products.
  • It’s important to consider accessibility from the very beginning and throughout the entire process, starting with a strategy where you determine your accessibility goals.
  • After you develop your templates and reusable code based on your goals and designs, you need…
  • …to test for accesibility early and often, as soon as you have working code, to give feedback to your designers and developers, and re-examine your strategy based on what’s realistically achievable. Since developers tend to make the same accessibility errors over and over again because they don’t understand the reasons behind the accessibility checklists, after finding these errors, train your developers early on to save time and money later.
  • Luke Wroblewski talks about how designing for mobile first can improve your web site or app in many ways. Many choices that enhance the mobile experience also improve accessibility, and vice versa, an accessible site or app is better prepared for mobile experiences.For more on designing for mobile first:Mobile First: One Year LaterMobile First presentationAdditional material: Accessibility First—for a Better User Experience for All by Whitney Quisenberry
  • An example of an interaction design that doesn’t work for mobile is an action that requires one to hover their mouse over an object on the screen. My to do list comes from a web application called backpack. In order to edit the list, you have to hover your mouse over the list, and then you see the options to edit, delete or move the list. (And each of these actions also require a mouse.)But you can’t rely on hover effects for touch screen users, so in order to use backpack on my iPhone I had to purchase a separate iPhone app. Hover effects are also incompatible with the keyboard, voice control, and screen readers. They only work with a mouse.
  • This is the most important tip of this presentation, because performing usability research will lead to a better understanding of the habits and mental models of people with disabilities.Nothing will teach you more about accessibility than observing people with disabilities struggle with technology and poor designs.I learned more about accessibility by working with a blind user of a screen reader for a few years, by observing how he and others use a computer and interacted (mostly struggled) with our designs and other designs, than I have from all my other experiences and reading put together.
  • Shawn Lawton Henry has written a book Just Ask that details how to incorporate people with disabilities into your usability testing. Her book is the only one that covers this topic, and it’s available online for free. She goes into great detail and has many important tips and insights that we don’t have time to cover here.Two tips to consider: When starting out, find expert users of assistive technology as participants for your research. Less experienced users may have difficulty using your product due to their lack of skill, rather than any barriers caused by your design. Don’t be afraid that recruiting users with disabilities will be too difficult.
  • …that people with disabilities can’t or won’t use your product.
  • Why would a blind man need the department of motor vehicle’s website to be accessible? I mean, he can’t drive, right?What if he wants to help his 16 year old daughter get her driver’s license?In fact, accessible products can have a profound impact on people with disabilities. I’ve talked to many people with disabilities, and accessible products: computers, websites, cell phones, twitter: have improved their lives. Just imagine how different your life would be if you couldn’t use the Web or your cell phone!Now imagine if your design or code is the reason someone can’t get employment, because the interface they need to do a job is not accessible for them. How would you feel?
  • (Note: A CAPTCHA is a type of challenge-response test used in computing as an attempt to ensure that the response is not generated by a computer….It is a contrived acronym based on the word &quot;capture&quot; and standing for &quot;Completely Automated Public Turing test to tell Computers and Humans Apart.&quot; Source: Wikipedia)Please raise your hand if you like trying to enter words into a CAPTCHA. CAPTCHA are more successful at blocking your customers than at blocking spam, and can be especially difficult for many people with disabilities. I interviewed a dyslexic woman who stated she abandoned forms guarded by CAPTCHA at least 80% of time. That means your site guarded by a CAPTCHA is losing her business to a website that uses other methods to prevent spam.Read:
  • People with disabilities want to be as independent as possible. So getting them to take control, to be more independent, is the best accessibility feature you can create.For example, look at the iPad.
  • I want everyone with an iPhone or iPad to go into the general settings and select accessibility see all the options you have. One option is to speak auto text.Glenda’s iPad Accessibility Success StoryGlenda Watson Hyatt has cerebral palsy. Using an iPad allows her to communicate in ways she never could before, including people with other disabilities. She can type using just her left thumb and either provide a display of her communication to someone, or, using the speak auto text feature (highlighted in the image of the iPad accessibility settings screen), have the iPad speak for her.
  • Full quote: “Then [after purchasing her iPad], I did something I had never done before: I went into one of the many Starbucks at O’Hare and ordered my first mocha frappuccino by myself. No misunderstanding or hand gesturing involved. It was so cool, like another door had just opened for me! I feel like technology is finally catching up with what I truly need.”Source:
  • If you provide a slideshow, make sure transitions are slow enough for people to read the content.
  • I tested a sample slide from a web home page and found that the slide changes approximately every 4 seconds but it takes 8-10 seconds to read all the slide’s text.That doesn’t include the time it takes to orient yourself on the page and decide you want to read the slide content, and it doesn’t account for people who read at a slower pace.Solutions: slow your transitions even better, allow people to control the timing or the advancement of each slide.
  • You or your client have spent a lot of time and money creating and distributing your content. (That content can be images, text, video, audio.) Make sure the widest possible audience can benefit from it, don’t you want as many customers as possible?
  • At first glance this chart may look fine, but the brightness level between red and blue is too similar, as you can see…
  • …when you convert this to grayscale. Remember that people often print your beautiful color designs on a black and white printer to take to their meeting.
  • Better…
  • But this chart is the best solution, because now in addition to the increased contrast, we have also added diagonal lines to the red bars.
  • As you can see when we convert this again to grayscale.
  • Imagine you can’t see or hear the context surrounding a link phrase…
  • Blind users of a screen reader often tab through a list of links on the page, scanning the page with their ears the same way you or I scan using our eyes. Do you want to read every word of content on every web page you visit? Of course not, and neither do users of screen readers or other assistive technologies.Therefore link text should make sense standing alone, without the context of the surrounding sentence. So instead of writing click here as your link text, try something that is more descriptive of the page you are linking to.Instead of writing “click here for more,” try “read more about the Canadian Olympic Curling squad” and link the phrase “Canadian Olympic Curling squad.”
  • When a person submits a form with missing or incorrect data, first alert him to the presence of the error, and make sure the error message is descriptive enough. In this example, we return the following error message:We’re sorry, but there were 2 errors in the information you submitted.Please enter your first name.Please enter your zip code so we can properly calculate shipping.
  • Next, we set focus on the error message. This helps screen reader users and others know that an error has occurred. Otherwise, a person may not understand why the page has reloaded instead of moving on to another screen.
  • Second, allow the user to easily access the form elements that need to be modified. In this case, we link a phrase in the message, “enter your first name,” to the form field, “First Name (required),” that needs to be completed.
  • People with disabilities includes a wide range of people, not just the blind or otherwise visually impaired. Making your product more accessible also makes it more usable for all of us.Accessibility should be a part of every product we create, considered from the beginning and throughout the design, development, and maintenance of that product.
  • You can start taking action now:I want everyone here to include at least one person with a disability in your next usability study.
  • I hope what you’ve learned today will help you…
  • move your products even more towards the all end of the accessibility continuum.
  • Accessibility is not a Checklist

    1. Accessibility is not a Checklist <br />An Interaction Designer’s Guide to Creating Accessible Interfaces<br />Jimmy Chandler<br />blog<br />twitter<br />personal<br />employer<br /><br />@uxprinciples<br /><br />Sapient Government Services<br />
    2. #A11Y = Accessibility<br />2<br />
    3. Introduction<br />3<br />
    4. “The principle behind all design is human dignity.”<br />4<br />Richard Buchanan<br />Keynote presentation at Interaction 11Friday, February 11, 2010 <br />
    5. 5<br />25%<br />
    6. People<br />6<br />
    7. Checklists?<br />7<br />
    8. 8<br />
    9. Does the image have alternative text?<br />9<br />Yes<br />No<br />
    10. 10<br />
    11. 11<br />
    12. 12<br />
    13. 13<br />
    14. Accessibility is Not a Checklist<br />14<br />
    15. Continuum<br />15<br />One<br />All<br />
    16. Continuum<br />16<br />One<br />All<br />
    17. Continuum<br />17<br />One<br />All<br />
    18. User-Centered Design<br />18<br />
    19. Process Tips<br />19<br />
    20. Tip #1Iterative process <br />20<br />
    21. 21<br />
    22. 22<br />
    23. 23<br />
    24. Tip #2Design for mobile first<br />24<br />
    25. 25<br />Source: and<br />
    26. 26<br />
    27. Tip #3Include people with disabilities in your usability research<br />27<br />
    28. 28<br /><br />
    29. Tip #4Don’t Assume…<br />29<br />
    30. 30<br />
    31. Design Tips<br />31<br />
    32. Tip #5Don’t punish your customers to solve your business problem<br />32<br />
    33. 33<br />
    34. Tip #6Get people to drive themselves <br />34<br />
    35. 35<br />
    36. 36<br />From (Photo credit: Karen Putz)<br />
    37. “It was so cool, like another door had just opened for me!”<br />37<br />Glenda Watson Hyatt, the left-thumbed blogger<br /><br />
    38. Tip #7Have people define their own time <br />38<br />
    39. Slideshows<br />39<br />
    40. Slideshows<br />40<br />
    41. Tip #8Protect your investment <br />41<br />
    42. Brightness<br />42<br />
    43. Grayscale<br />43<br />
    44. Increased Contrast<br />44<br />
    45. Contrast and Texture<br />45<br />
    46. Grayscale<br />46<br />
    47. Tip #9Create alternative contexts<br />47<br />
    48. Scan this Page<br />48<br />
    49. Tip #10Provide help in an accessible manner<br />49<br />
    50. Help People Recover From Errors<br />50<br />
    51. Help People Recover From Errors<br />Cursor<br />51<br />
    52. Help People Recover From Errors<br />Cursor<br />52<br />
    53. Conclusion<br />53<br />
    54. Take Action!<br />54<br />Include…<br />
    55. Continuum<br />55<br />One<br />All<br />
    56. Continuum<br />56<br />One<br />All<br />
    57. Thank You<br />57<br />Please provide feedback on this presentation:<br /><br />
    58. Accessibility is not a Checklist <br />Presented at Interaction 11Boulder, CO February 12, 2011<br />Jimmy Chandler<br />blog<br />twitter<br />personal<br />employer<br /><br />@uxprinciples<br /><br />Sapient Government Services<br />58<br />