whitney quesenbery wq usability.com | @whitneyq | slideshare/whitneyq center for civic design:...

Whitney QuesenberyWQusability.com | @whitneyq | slideshare/whitneyq

Center for Civic Design: UsabilityInCivicLife.org

A Web For

Everyone

Accessibility is a design problem

A web for everyone

2

Which of these are assistive technology?

2

3

Disability: the outcome of the interaction between a  person with an impairment and the environment and attitudinal barriers she/he may face

- International Classification of Functioning (ICF)

3

4

I feel like technology is finally catching up with what I truly need.

Glenda Watson Hyatt DoItMyselfBlog.com

4

5

Principles for accessible design1. 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 usability5

6

1 | People First

Carol Jacob

Lea Emily Steven

Maria Trevor Vishnu6

7

2 | Clear purpose: well defined goals

Design for mobile first because...

Mobile forces you to focus

(November 2009)

http://www.lukew.com/ff/entry.asp?933 7

8

Build accessibility into your thinking...and your templates

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. 8

9

Design for diversity in interaction stylesThink outside the mouse

Images: Braille, foot pedal, magnifier, Talking Dial, Voiceover, joystick, audio, high contrast keyboard Glenda Watson Hyatt and her iPad

9

10

3 | Solid structure: built to standards

10

11

4 | Easy interaction: everything works

11

12

5 | Helpful wayfinding: guides users

12

13Identify 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

13

14Even complex pages work with good signposting

OpenIDEO.com14

15Even complex pages work with good signposting

OpenIDEO.com

Challenge Phases

Main Content

User Comments

Stats

Related themes

Share

Activity feed

15

16

6 | Clean presentation: supports meaning

16

17Learn to recognize good contrast, so it becomes part of your design palette

Large Text

Body Text

Large Text

Body Text

Large Text

Body Text

vs.

Large Text

Body Text

Large Text

Body Text

Large Text

Body Text

17

18

7 | Plain language: creates a conversation

Clear summary

States risk in text

.. and visually

Invites action

18

19

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 19

20Support different reading styles and perception

http://www.careerinfonet.org/finaidadvisor/earnings.aspx?nodeid=21 20

21Support different reading styles and perception

http://www.careerinfonet.org/finaidadvisor/earnings.aspx?nodeid=21 21

Good title

Visual information

Clear summary

Data in a table

22

8 | Accessible media: supports all senses

22

Shape

Color

Text

23

Meaningful alternatives for visual information

What’s the right alternative text for this image?

23

24The right alt text depends on context:Why are you putting this image on the screen?

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

24

25

9 | Universal usability: create flow and delight

Simple.com25

26

When everyone has a place at the (design) tableWe can design a web for everyone

Photo: mtstcil.org andITIF/CATEA26

27

Have a new perspective

Photo: AIGA Dessign for Democracy and blog.metmuseum.com27

Whitney QuesenberyWQusabilityCenter for Civic Design

whitney@wqusability.com

@whitneyq