a web for everyone: accessibility as a design challenge
DESCRIPTION
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.pdfTRANSCRIPT
A Web for EveryoneAccessibility is a design challenge
Whitney QuesenberyWQusability.com | Center for Civic Design
Twitter: @whitneyq #AUX
Book Resources: http://rosenfeldmedia.com/books/a-web-for-everyone/resources/
Which of these are for people with disabilities?
2
Disabilitythe 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
Things move at different paces
Pace layering concept from Stewart Brand, The Clock of the Long Now
Pace layers applied to accessibility
Stewart Brand, The Clock of the Long Now
1876 2010200019901980
Telephone Fax Email
WalkmanBlackberry
iPod
iPhoneJAWS
VoiceOver
FacebookTwitter
Apple I MacintoshIBM PC
iPad
I feel like technology is finally catching up with what I truly need.
Glenda Watson Hyatt DoItMyselfBlog.com
Accessible. But usable? Used?
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
People First
9
1
Designing for differences
People are the first consideration, and sites are designed with the needs of everyone in the audience in mind.
Steven• Graduated from the Art
Institute• Graphic artist in a
small ad agency• iPad, iPhone, MacBook
Pro, super monitor
Jacob• College graduate, legal
training courses• Paralegal, writes case
summaries• Shares an apartment
with a friend• Laptop, iPhone
Emily• 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
Emily
I want to do everything for myself
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
• 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
Jacob
The right technology lets me do anything.
Ability: Blind since birth with some light perception
Aptitude: Skilled technology user
Attitude: Digital native, early adopter, persists until he gets it
Assistive Technology: Screen reader, audio note-taker, Braille display
• 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
Steven
My only disability is that everyone doesn't sign.
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
• 38 years old• Art school• Graphic artist in a
small ad agency• iPad, iPhone, MacBook
Pro; good computer at work
Carol Jacob
Lea Emily
Steven
Maria Trevor
Vishnu
Clear purpose: well-defined goals2
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
Solid structure: Built to standards
3
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.
Unfriendly structure
41 keypresses later
Easy interaction: Everything works
4
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
Built in or added on?
Helpful wayfinding: guides users5
People can navigate a site, feature, or page following self-explanatory signposts.
Identify the areas of a page visually and in code
role = banner
role = main
role = contentinfo
role = complementary
role = form
role = navigation
role = navigation
role = search
Even complex pages work with good signposting
OpenIDEO.com
Even complex pages work with good signposting
OpenIDEO.com
Challenge Phases
Main Content
User Comments
Stats
Related themes
Share
Activity feed
Clean presentation: Supports meaning
6
People can perceive and understand elements in the design.
Flexible presentation allows for user needs & preferences
Plain language: creates a conversation
7
People can read, understand, and use the information.
Sandra Fisher Martins - www.youtube.com/watch?v=tP2y0vU7EG8
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
Organize content for comprehension and action
Clear summary
States risk in text
.. and visually
Invites action
Support different reading styles and perception
http://www.careerinfonet.org/finaidadvisor/earnings.aspx?nodeid=21
Support different reading styles and perception
http://www.careerinfonet.org/finaidadvisor/earnings.aspx?nodeid=21
Good title
Visual information
Clear summary
Data in a table
Accessible media: supports all senses
8
People can understand and use information contained in media, such as images, audio, video, animation, and presentations.
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!
Synchronized audio+text
Graham Pullen, author of Design Meets Disabilityhttp://research.microsoft.com/apps/video/default.aspx?id=103405
Universal usability: create delight9
People can focus on the experience and their own goals because the product anticipates their needs.
Simple.com
In Practice: An integrated process
10
People and organizations consider accessibility integral to their work and products.
Photo: mtstcil.org and University of Baltimore
Change the questionDesign and research for
extremesPhotos: MSU: testing a joystick. CATEA: testing dual switch navigation on EZBallot.
Find better ways to collaborate
Photos: ITIF AVTI/CATEA
Open up your recruiting
http://anywhereballot.orghttp://civicdesigning.org/featured-story/rapid-responsive-radical-the-anywhere-ballot-is-born/
Improve the tools
Knowbility and Loop 11 AccessWorks
Be a ^ superheroCreate a new perspective
Photo: blog.metmuseum.com: Alexander McQueen legs, designed for Aimee Mullinshttp://blog.metmuseum.org/alexandermcqueen/tag/no-13/Aimee Mullins: My 12 pairs of legs: http://www.ted.com/talks/aimee_mullins_prosthetic_aesthetics.html
UX
Storytelling for User Experiencewith Kevin Brooks
Global UXwith Daniel Szuc
A Web for Everyonewith Sarah Horton
http://rosenfeldmedia.com/books/a-web-for-everyone/
Whitney [email protected]@whitneyq
Center for Civic [email protected]@ChadButterfly