Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

A Web for Everyone: Accessibility as a design challenge

29,875 views

Published on

Let's get past the idea that checklists and compliance all there is to accessibility. Designing for accessibility is a user experience design problem, starting with understanding how people with disabilities use your products. If we aim to design for all senses we can focus on easy interaction, helpful wayfinding, clean presentation, plain language and media instead of "rules." Doing so, we can create a web for everyone and a delightful user experience where accessibility and usability work together.

Updated January 21
Replay of the O'Reilly webcast: http://www.oreillynet.com/pub/e/2992
Transcript of the O'Reilly webcast: http://www.wqusability.com/handouts/AWFE-Challenge-OReilly-Transcript.pdf

Published in: Design, Technology
  • Be the first to comment

A Web for Everyone: Accessibility as a design challenge

  1. 1. A Web for Everyone Accessibility is a design challenge Whitney Quesenbery WQusability.com | Center for Civic Design Twitter: @whitneyq #AUX Book Resources: http://rosenfeldmedia.com/books/a-web-for-everyone/resources/
  2. 2. Which of these are for people with disabilities? 2
  3. 3. Disability the outcome of the interaction between a person ... and the environment and attitudinal barriers they may face - International Classification of Functioning (ICF), World Health Organization 3
  4. 4. Things move at different paces Pace layering concept from Stewart Brand, The Clock of the Long Now
  5. 5. Pace layers applied to accessibility Stewart Brand, The Clock of the Long Now
  6. 6. JAWS Apple I IBM PC Walkman Telephone 1876 Fax iPhone iPad Blackberry Twitter Google Facebook Macintosh Email 1980 1990 iPod 2000 VoiceOver 2010 I feel like technology is finally catching up with what I truly need. Glenda Watson Hyatt DoItMyselfBlog.com
  7. 7. Accessible. But usable? Used?
  8. 8. Principles for Accessible UX 1. People first 2. Clear purpose 3. Solid structure 4. Easy interaction 5. Helpful wayfinding 6. Clean presentation 7. Plain language 8. Accessible media 9. Universal usability
  9. 9. 1 People First Designing for differences People are the first consideration, and sites are designed with the needs of everyone in the audience in mind. Emily Jacob Steven • Graduated from high school and working on a college degree • Lives in a loft with a group of friends • Works part-time at a local community center • College graduate, legal • Graduated from the Art training courses Institute • Paralegal, writes case • Graphic artist in a small summaries ad agency • Shares an apartment with • iPad, iPhone, MacBook a friend Pro, super monitor • Laptop, iPhone 9
  10. 10. I want to do everything for myself Emily • 24 years old • Graduated from high school and working on a college degree • Lives in a small independent living facility • Works part-time at a local community center Ability: Cerebral palsy. Difficult to use hands and has some difficulty speaking clearly; uses a motorized wheel chair Aptitude: Uses the computer well, with the right input device; good at finding efficient search terms Attitude: Wants to do everything for herself; can be impatient Assistive Technology: Communicator (AAC) with speech generator, iPad, power wheelchair
  11. 11. The right technology lets me do anything. Ability: Blind since birth with some light perception Jacob • 32 years old • College graduate, legal training courses • Shares an apartment with a friend • Paralegal, reviews cases and writes case summaries • Laptop, braille display, iPhone Aptitude: Skilled technology user Attitude: Digital native, early adopter, persists until he gets it Assistive Technology: Screen reader, audio note-taker, Braille display
  12. 12. My only disability is that everyone doesn't sign. Steven • 38 years old • Art school • Graphic artist in a small ad agency • iPad, iPhone, MacBook Pro; good computer at work Ability: Native language is ASL; can speak and read lips; uses SMS/IM, Skype, and video chat Aptitude: Good with graphic tools, and prefers visuals to text; poor spelling makes searching more difficult Attitude: Can be annoyed about accessibility, like lack of captions Assistive Technology: Sign language, CART, captions, video chat
  13. 13. Carol Jacob Steven Lea Emily Vishnu Maria Trevor
  14. 14. 2 Clear purpose: well-defined goals People enjoy products that are designed for the audience and guided by a defined purpose and goals. Design for mobile first because... mobile forces you to focus! (November 2009) http://www.lukew.com/ff/entry.asp?933
  15. 15. 3 Solid structure: Built to standards People feel confident using the design because it is stable, robust, and secure. A big hat tip to @AccessibleJoe and all the folks working on making WordPress more accessible, and to Sylvia Eggers, author of the accessible child theme shown here.
  16. 16. Unfriendly structure 41 keypresses later
  17. 17. 4 Easy interaction: Everything works People can use the product across all modes of interaction and operating with a broad range of devices. Images: Braille, foot pedal, magnifier, Talking Dial, Voiceover, joystick, audio, high contrast keyboard Glenda Watson Hyatt and her iPad
  18. 18. Built in or added on?
  19. 19. 5 Helpful wayfinding: guides users People can navigate a site, feature, or page following selfexplanatory signposts.
  20. 20. Identify the areas of a page visually and in code role = navigation role = banner role = main role = form role = search role = complementary role = navigation role = contentinfo
  21. 21. Even complex pages work with good signposting OpenIDEO.com
  22. 22. Even complex pages work with good signposting Challenge Phases Main Content Stats Share Activity feed User Comments OpenIDEO.com Related themes
  23. 23. 6 Clean presentation: Supports meaning People can perceive and understand elements in the design.
  24. 24. Flexible presentation allows for user needs & preferences
  25. 25. 7 Plain language: creates a conversation People can read, understand, and use the information. Sandra Fisher Martins - www.youtube.com/watch?v=tP2y0vU7EG8
  26. 26. People read with different levels of literacy Below basic – only the most simple and concrete reading skills Basic – able to manage everyday tasks Intermediate – moderately challenging activities like consulting reference material Proficient – interpreting text, comparing viewpoints U.S. National Assessment of Adult Literacy http://nces.ed.gov/naal/kf_demographics.asp
  27. 27. Organize content for comprehension and action Clear summary States risk in text .. and visually Invites action
  28. 28. Support different reading styles and perception http://www.careerinfonet.org/finaidadvisor/earnings.aspx?nodeid=21
  29. 29. Support different reading styles and perception Good title Clear summary Visual information Data in a table http://www.careerinfonet.org/finaidadvisor/earnings.aspx?nodeid=21
  30. 30. 8 Accessible media: supports all senses People can understand and use information contained in media, such as images, audio, video, animation, and presentations.
  31. 31. Meaningful alternatives for visual information What’s the right ALT text for this image? Fox Red fox A red fox, standing on a pile of rocks, looking back at the camera Red fox at Sachuest Point National Wildlife Refuge It depends on context!
  32. 32. Synchronized audio+text Graham Pullen, author of Design Meets Disability http://research.microsoft.com/apps/video/default.aspx?id=103405
  33. 33. 9 Universal usability: create delight People can focus on the experience and their own goals because the product anticipates their needs. Simple.com
  34. 34. 10 In Practice: An integrated process People and organizations consider accessibility integral to their work and products. Photo: mtstcil.org and University of Baltimore
  35. 35. Change the question Design and research for extremes Photos: MSU: testing a joystick. CATEA: testing dual switch navigation on EZBallot.
  36. 36. Find better ways to collaborate Photos: ITIF AVTI/CATEA
  37. 37. Open up your recruiting
  38. 38. Improve the tools http://anywhereballot.org http://civicdesigning.org/featured-story/rapid-responsive-radical-the-anywhere-ballot-is-born/ Knowbility and Loop 11 AccessWorks
  39. 39. UX Be a ^ superhero Create a new perspective Photo: blog.metmuseum.com: Alexander McQueen legs, designed for Aimee Mullins http://blog.metmuseum.org/alexandermcqueen/tag/no-13/ Aimee Mullins: My 12 pairs of legs: http://www.ted.com/talks/aimee_mullins_prosthetic_aesthetics.html
  40. 40. Storytelling for User Experience with Kevin Brooks Global UX with Daniel Szuc A Web for Everyone with Sarah Horton http://rosenfeldmedia.com/books/a-web-for-everyone/
  41. 41. Whitney Quesenbery whitneyq@wqusability.com www.wqusability.com @whitneyq Center for Civic Design whitneyq@centerforcivicdesign centerforcivicdesign.org @ChadButterfly

×