Whitney Quesenbery WQ usability.com | 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 design 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 5

6 1 | People First Carol JacobLea Emily Steven MariaTrevorVishnu 6

7 2 | Clear purpose: well defined goals Design for mobile first because... Mobile forces you to focus (November 2009) 7

8 Build accessibility into your thinking... and your templates A big hat tip 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 styles Think 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

13 Identify the areas of a page visually and in code role = banner role = main role = contentinfo role = complementary role = form role = navigation role = search 13

14 Even complex pages work with good signposting OpenIDEO.com 14

15 Even 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

17 Learn 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 19

20 Support different reading styles and perception 20

21 Support different reading styles and perception 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

24 The 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.com 25

26 When everyone has a place at the (design) table We can design a web for everyone Photo: mtstcil.org andITIF/CATEA 26

27 Have a new perspective Photo: AIGA Dessign for Democracy and blog.metmuseum.com 27

Whitney Quesenbery WQusability Center for Civic