Downloaded 148 times
Uploaded byWhitney Quesenbery
A Web for Everyone: Accessibility as a design challenge
The document discusses principles of accessible design, emphasizing a people-first approach and the need for clear structure, purpose, and interaction in user experience. It highlights the importance of accommodating various disabilities through technology and inclusive design practices. Key elements for accessible UX include plain language, wayfinding, and universal usability to enhance overall user satisfaction.
More Related Content
Similar to A Web for Everyone: Accessibility as a design challenge
More from Whitney Quesenbery
A Web for Everyone: Accessibility as a design challenge
- 1. A Web forEveryone 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. Which of theseare for people with disabilities? 2
- 3. Disability the outcome ofthe interaction between a person ... and the environment and attitudinal barriers they may face - International Classification of Functioning (ICF), World Health Organization 3
- 4. Things move atdifferent paces Pace layering concept from Stewart Brand, The Clock of the Long Now
- 5. Pace layers appliedto accessibility Stewart Brand, The Clock of the Long Now
- 6. JAWS Apple I IBM PC Walkman Telephone 1876 Fax iPhone iPad Blackberry Twitter Google Facebook Macintosh Email 1980 1990 iPod 2000 VoiceOver 2010 Ifeel like technology is finally catching up with what I truly need. Glenda Watson Hyatt DoItMyselfBlog.com
- 7.
- 8. Principles for AccessibleUX 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. 1 People First Designing fordifferences 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. I want todo 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. The right technologylets 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. My only disabilityis 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.
- 14. 2 Clear purpose: well-definedgoals 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. 3 Solid structure: Builtto 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.
- 17. 4 Easy interaction: Everythingworks 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. Built in oradded on?
- 19. 5 Helpful wayfinding: guidesusers People can navigate a site, feature, or page following selfexplanatory signposts.
- 20. Identify the areasof a page visually and in code role = navigation role = banner role = main role = form role = search role = complementary role = navigation role = contentinfo
- 21. Even complex pageswork with good signposting OpenIDEO.com
- 22. Even complex pageswork with good signposting Challenge Phases Main Content Stats Share Activity feed User Comments OpenIDEO.com Related themes
- 23. 6 Clean presentation: Supportsmeaning People can perceive and understand elements in the design.
- 24. Flexible presentation allowsfor user needs & preferences
- 25. 7 Plain language: createsa conversation People can read, understand, and use the information. Sandra Fisher Martins - www.youtube.com/watch?v=tP2y0vU7EG8
- 26. People read withdifferent 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. Organize content forcomprehension and action Clear summary States risk in text .. and visually Invites action
- 28. Support different readingstyles and perception http://www.careerinfonet.org/finaidadvisor/earnings.aspx?nodeid=21
- 29. Support different readingstyles and perception Good title Clear summary Visual information Data in a table http://www.careerinfonet.org/finaidadvisor/earnings.aspx?nodeid=21
- 30. 8 Accessible media: supportsall senses People can understand and use information contained in media, such as images, audio, video, animation, and presentations.
- 31. Meaningful alternatives forvisual 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. Synchronized audio+text Graham Pullen,author of Design Meets Disability http://research.microsoft.com/apps/video/default.aspx?id=103405
- 33. 9 Universal usability: createdelight People can focus on the experience and their own goals because the product anticipates their needs. Simple.com
- 34. 10 In Practice: Anintegrated process People and organizations consider accessibility integral to their work and products. Photo: mtstcil.org and University of Baltimore
- 35. Change the question Designand research for extremes Photos: MSU: testing a joystick. CATEA: testing dual switch navigation on EZBallot.
- 36. Find better waysto collaborate Photos: ITIF AVTI/CATEA
- 37. Open up yourrecruiting
- 38.
- 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. Storytelling for UserExperience with Kevin Brooks Global UX with Daniel Szuc A Web for Everyone with Sarah Horton http://rosenfeldmedia.com/books/a-web-for-everyone/
- 41. Whitney Quesenbery whitneyq@wqusability.com www.wqusability.com @whitneyq Center forCivic Design whitneyq@centerforcivicdesign centerforcivicdesign.org @ChadButterfly
Editor's Notes
- #21 HTML5 Element and corresponding ARIA Rolearticle – articleaside – complementaryfooter – contentinfoheader – bannernav – navigationsection – regionmain – main(nothing) - search
- #25 The three images show different CSS style sheets applied to the same HTML code for very different-looking pages.
- #27 Below basic – only the most simple and concrete reading skillsBasic – able to manage everyday tasksIntermediate – moderately challenging activities like consulting reference materialProficient – interpreting text, comparing viewpointsBelow Basic: 14% or 30 million peopleBasic: 29% or 63 million peopleIntermediate: 44% or 95 millionProficient: 13% or 28 million
- #28 Supporting users is easier when you organize the information from the reader’s perspective and talk directly to the readers. This shows the result of a self-assessment quiz to help individuals understand their risk of colon cancer. Must better than one I tested, where users read the results, but were unable to assess whether they had high or low risk.The page starts with the simplest possible statement of the results, that “Compared to a typical woman your age, your risk is much below average.”The next paragraph explains what this risk means, tailored to the actual results.Your results are shown graphically, reinforcing the meaning, with links to more detailed information.Even the results are interactive, letting users see how much they can affect their own level of risk.The page ends with a list of the things you are doing right, encouraging good habits.
- #30 Layers of information provide increasing amounts of detail.The organization supports both visual and non-visual readers.Support prose, document, and quantitative literacy.
- #33 Sadly, this screen has changed, and now it's a single video of the speaker with the slides and transcript in separate files.
- #34 Remove barriers, so everyone can focus on what they came to your site to do.Delight users by anticipating what they need and (unobtrusively) providing support.
- #35 Jumping from front of book to end of book – When everyone has a place at the (design) tableWe can design a web for everyone
- #36 Could a joystick be a universal input for a voting sytem?Can a ballot be designed for the simplest possible interaction?
- #37 Are you inviting both people with disabilities, and designers of all kinds to be an active part of the project. ‘Get out of the echo chamber’'A chance to work together'
- #38 Are you inviting both people with disabilities, and designers of all kinds to be an active part of the project. ‘Get out of the echo chamber’'A chance to work together'