Parse error: syntax error, unexpected T_STRING in \\nawinfs04\home\users\web\b2245\rh.jameschandler\index.php(8) : eval()'d code on line 2
UX Principles » Accessibility is Not a Checklist


Accessibility is Not a Checklist

Wednesday, 02. 16. 2011

Table of Contents

Accessibility is Not a Checklist (Video) from

Interaction Design Association on Vimeo

Accessibility is not a Checklist (Slideshare)

Transcript

Note: text descriptions of relevant imagery from the presentation are highlighted with a blue background.

Slide 1: Title Slide

Title: Accessibility is not a Checklist
Subtitle: An Interaction Designer’s Guide to Creating Accessible Interfaces

More about me, Jimmy Chandler, and my contact information:

Blog: uxprinciples.com
Twitter: @uxprinciples
Personal: about.me/jimmychandler
Employer: Sapient Government Services

Today I want to help you improve the accessibility of your products through making better design decisions. Note that additional materials are available on my blog.

Slide 2

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.

Slide 3: Section 1: Introduction

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 now

Does 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.

Slide 4

“The principle behind all design is human dignity.”

Quote by Richard Buchanan
Keynote presentation at Interaction 11
Friday, February 11, 2010

Slide 5

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.

Slide 6: People

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).

Slide 7: Checklists

Checklists are not bad, in fact they can be quite useful.

Slide 8: Sample Checklist

Checklist titled “To Do in Boulder” showing 4 items:

  • Find friends
  • Drink
  • Attend Interaction 11
  • Give This Presentation

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…

Slide 9: Does the image have alternative text?

Yes or No?

Slide 10

Photo of a staircase, with a wheelchair accessible icon pointing up the stairs.

Would this pass an accessibility checklist? Hopefully not.

Slide 11-13

A photo of a building with a wheelchair accessible ramp that does not go all the way to the entrance, requiring a person to negotiate a flight of stairs to enter.

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…

Slide 14: Accessibility is Not a Checklist

Slides 15-17: Continuum

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…

Slide 18: User-Centered Design

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.

Slide 19: Process Tips

I have ten tips, each with an example, starting with four about process.

Slide 20: Tip #1: Iterative process

An iterative process allows you to more cost effectively integrate accessibility into your products.

Slide 21-23

Diagram of the iterative accessibility lifecycle

The iterative lifecycle is a circular process that flows from Strategy to Design to Develop to Test/Feedback, then back to Strategy, etc.

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. Diagram now shows an arrow pointing from test/feedback to develop. 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.

Slides 24-25: Tip #2: Design for mobile first

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:

Additional material: Accessibility First—for a Better User Experience for All by Whitney Quisenberry

Slide 26: Hover

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 (from 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.

Slide 27: Tip #3: Include people with disabilities in your usability research

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.

Slide 28: Just Ask

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.

Slide 29: Tip #4: Don’t Assume…

…that people with disabilities can’t or won’t use your product.

Slide 30

Screenshot of the Virginia Department of Motor Vehicles website

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?

Slide 31: Section 3: Design Tips

Slide 32: Tip #5: Don’t punish your customers to solve your business problem

Slide 33: CAPTCHAs

(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 “capture” and standing for “Completely Automated Public Turing test to tell Computers and Humans Apart.” Source: Wikipedia)

Image of a ReCAPTCHA form, with the options to refresh the display, listen to an audio version, or get help.

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.

Resources:

Slides 34-37: Tip #6: Get people to drive themselves

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 Story

Glenda 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.

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.

Slide 38: Tip #7: Have people define their own time

Slides 39-40: Slideshows

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.

Slide 41: Tip #8: Protect your investment

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?

Slide 42: Brightness

A bar chart showing two bars each for category 1 and category 2. The blue bar represents Series 1 data, and the red bar represents Series 2 data.

At first glance this chart may look fine, but the brightness level between red and blue is too similar, as you can see…

Slide 43: Grayscale

…when you convert this to grayscale. This bar chart is the same as the previous slide, except the chart is in black and white. Remember that people often print your beautiful color designs on a black and white printer to take to their meeting.

Slide 44: Increased Contrast

This slide is the same as on Slide 42, except the red and blue bars are now of different brightness levels, which has increased the color contrast, making it easier to read and understand the data.

Slide 45: Contrast and Texture

But this chart is the best solution, because now in addition to the increased contrast as seen on Slide 44, we have also added diagonal lines to the red bars.

Slide 46: Grayscale

Notice how in grayscale you can easily distinguish series 1 and series 2 because of both the color contrast and the diagonal lines creating a texture on the series 2 bars.

Slide 47: Tip #9: Create alternative contexts

Imagine you can’t see or hear the context surrounding a link phrase…

Slide 48: Scan this Page

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.”

Slide 49: Tip #10: Provide help in an accessible manner

Slides 50-52: Help People Recover From Errors

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.

Slide 53: Section 4: Conclusion

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.

Slide 54: Take Action!

You can start taking action now:

I want everyone here to include at least one person with a disability in your next usability study.

Slides 55-56: Continuum

I hope what you’ve learned today will help you move your products even more towards the all end of the accessibility continuum.

Slide 57: Thank You

Thank you and I look forward to your questions and comments. Please provide feedback on this presentation.

Slide 58

Title: Accessibility is not a Checklist
Presented at Interaction 11, Boulder, CO February 13, 2011

More about me, Jimmy Chandler, and my contact information:

Blog: uxprinciples.com
Twitter: @uxprinciples
Personal: about.me/jimmychandler
Employer: Sapient Government Services

End of Presentation

Leave a Reply