whitney quesenbery wq usability.com | @whitneyq | slideshare/whitneyq center for civic design:...
TRANSCRIPT
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
