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
Cheap Rate ➥8448380779 ▻Call Girls In Iffco Chowk Gurgaon
A Web for Everyone: Accessibility as a design challenge
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/
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. Things move at different paces
Pace layering concept from Stewart Brand, The Clock of the Long Now
5. Pace layers applied to accessibility
Stewart Brand, The Clock of the Long Now
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. 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. 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. 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. 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
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. 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.
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
19. 5
Helpful wayfinding: guides users
People can navigate a site, feature, or page following selfexplanatory signposts.
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
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. 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. Organize content for comprehension and action
Clear summary
States risk in text
.. and visually
Invites action
28. Support different reading styles and perception
http://www.careerinfonet.org/finaidadvisor/earnings.aspx?nodeid=21
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. 8
Accessible media: supports all senses
People can understand and use information contained in media,
such as images, audio, video, animation, and presentations.
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!
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. 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. Change the question
Design and research for extremes
Photos: MSU: testing a joystick. CATEA: testing dual switch navigation on EZBallot.
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 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/
The three images show different CSS style sheets applied to the same HTML code for very different-looking pages.
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
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.
Layers of information provide increasing amounts of detail.The organization supports both visual and non-visual readers.Support prose, document, and quantitative literacy.
Sadly, this screen has changed, and now it's a single video of the speaker with the slides and transcript in separate files.
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.
Jumping from front of book to end of book – When everyone has a place at the (design) tableWe can design a web for everyone
Could a joystick be a universal input for a voting sytem?Can a ballot be designed for the simplest possible interaction?
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'
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'