a web for everyone: accessibility as a design challenge

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

Google

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 Quesenberywhitneyq@wqusability.comwww.wqusability.com@whitneyq

Center for Civic Designwhitneyq@centerforcivicdesigncenterforcivicdesign.org@ChadButterfly