whitney quesenbery wq usability.com | @whitneyq | slideshare/whitneyq center for civic design:...
TRANSCRIPT
![Page 1: Whitney Quesenbery WQ usability.com | @whitneyq | slideshare/whitneyq Center for Civic Design: UsabilityInCivicLife.org A Web For Everyone Accessibility](https://reader035.vdocuments.mx/reader035/viewer/2022070413/5697bf921a28abf838c8ee46/html5/thumbnails/1.jpg)
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
![Page 2: Whitney Quesenbery WQ usability.com | @whitneyq | slideshare/whitneyq Center for Civic Design: UsabilityInCivicLife.org A Web For Everyone Accessibility](https://reader035.vdocuments.mx/reader035/viewer/2022070413/5697bf921a28abf838c8ee46/html5/thumbnails/2.jpg)
2
Which of these are assistive technology?
2
![Page 3: Whitney Quesenbery WQ usability.com | @whitneyq | slideshare/whitneyq Center for Civic Design: UsabilityInCivicLife.org A Web For Everyone Accessibility](https://reader035.vdocuments.mx/reader035/viewer/2022070413/5697bf921a28abf838c8ee46/html5/thumbnails/3.jpg)
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
![Page 4: Whitney Quesenbery WQ usability.com | @whitneyq | slideshare/whitneyq Center for Civic Design: UsabilityInCivicLife.org A Web For Everyone Accessibility](https://reader035.vdocuments.mx/reader035/viewer/2022070413/5697bf921a28abf838c8ee46/html5/thumbnails/4.jpg)
4
I feel like technology is finally catching up with what I truly need.
Glenda Watson Hyatt DoItMyselfBlog.com
4
![Page 5: Whitney Quesenbery WQ usability.com | @whitneyq | slideshare/whitneyq Center for Civic Design: UsabilityInCivicLife.org A Web For Everyone Accessibility](https://reader035.vdocuments.mx/reader035/viewer/2022070413/5697bf921a28abf838c8ee46/html5/thumbnails/5.jpg)
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
![Page 6: Whitney Quesenbery WQ usability.com | @whitneyq | slideshare/whitneyq Center for Civic Design: UsabilityInCivicLife.org A Web For Everyone Accessibility](https://reader035.vdocuments.mx/reader035/viewer/2022070413/5697bf921a28abf838c8ee46/html5/thumbnails/6.jpg)
6
1 | People First
Carol Jacob
Lea Emily Steven
Maria Trevor Vishnu6
![Page 7: Whitney Quesenbery WQ usability.com | @whitneyq | slideshare/whitneyq Center for Civic Design: UsabilityInCivicLife.org A Web For Everyone Accessibility](https://reader035.vdocuments.mx/reader035/viewer/2022070413/5697bf921a28abf838c8ee46/html5/thumbnails/7.jpg)
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
![Page 8: Whitney Quesenbery WQ usability.com | @whitneyq | slideshare/whitneyq Center for Civic Design: UsabilityInCivicLife.org A Web For Everyone Accessibility](https://reader035.vdocuments.mx/reader035/viewer/2022070413/5697bf921a28abf838c8ee46/html5/thumbnails/8.jpg)
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
![Page 9: Whitney Quesenbery WQ usability.com | @whitneyq | slideshare/whitneyq Center for Civic Design: UsabilityInCivicLife.org A Web For Everyone Accessibility](https://reader035.vdocuments.mx/reader035/viewer/2022070413/5697bf921a28abf838c8ee46/html5/thumbnails/9.jpg)
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
![Page 10: Whitney Quesenbery WQ usability.com | @whitneyq | slideshare/whitneyq Center for Civic Design: UsabilityInCivicLife.org A Web For Everyone Accessibility](https://reader035.vdocuments.mx/reader035/viewer/2022070413/5697bf921a28abf838c8ee46/html5/thumbnails/10.jpg)
10
3 | Solid structure: built to standards
10
![Page 11: Whitney Quesenbery WQ usability.com | @whitneyq | slideshare/whitneyq Center for Civic Design: UsabilityInCivicLife.org A Web For Everyone Accessibility](https://reader035.vdocuments.mx/reader035/viewer/2022070413/5697bf921a28abf838c8ee46/html5/thumbnails/11.jpg)
11
4 | Easy interaction: everything works
11
![Page 12: Whitney Quesenbery WQ usability.com | @whitneyq | slideshare/whitneyq Center for Civic Design: UsabilityInCivicLife.org A Web For Everyone Accessibility](https://reader035.vdocuments.mx/reader035/viewer/2022070413/5697bf921a28abf838c8ee46/html5/thumbnails/12.jpg)
12
5 | Helpful wayfinding: guides users
12
![Page 13: Whitney Quesenbery WQ usability.com | @whitneyq | slideshare/whitneyq Center for Civic Design: UsabilityInCivicLife.org A Web For Everyone Accessibility](https://reader035.vdocuments.mx/reader035/viewer/2022070413/5697bf921a28abf838c8ee46/html5/thumbnails/13.jpg)
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
![Page 14: Whitney Quesenbery WQ usability.com | @whitneyq | slideshare/whitneyq Center for Civic Design: UsabilityInCivicLife.org A Web For Everyone Accessibility](https://reader035.vdocuments.mx/reader035/viewer/2022070413/5697bf921a28abf838c8ee46/html5/thumbnails/14.jpg)
14Even complex pages work with good signposting
OpenIDEO.com14
![Page 15: Whitney Quesenbery WQ usability.com | @whitneyq | slideshare/whitneyq Center for Civic Design: UsabilityInCivicLife.org A Web For Everyone Accessibility](https://reader035.vdocuments.mx/reader035/viewer/2022070413/5697bf921a28abf838c8ee46/html5/thumbnails/15.jpg)
15Even complex pages work with good signposting
OpenIDEO.com
Challenge Phases
Main Content
User Comments
Stats
Related themes
Share
Activity feed
15
![Page 16: Whitney Quesenbery WQ usability.com | @whitneyq | slideshare/whitneyq Center for Civic Design: UsabilityInCivicLife.org A Web For Everyone Accessibility](https://reader035.vdocuments.mx/reader035/viewer/2022070413/5697bf921a28abf838c8ee46/html5/thumbnails/16.jpg)
16
6 | Clean presentation: supports meaning
16
![Page 17: Whitney Quesenbery WQ usability.com | @whitneyq | slideshare/whitneyq Center for Civic Design: UsabilityInCivicLife.org A Web For Everyone Accessibility](https://reader035.vdocuments.mx/reader035/viewer/2022070413/5697bf921a28abf838c8ee46/html5/thumbnails/17.jpg)
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
![Page 18: Whitney Quesenbery WQ usability.com | @whitneyq | slideshare/whitneyq Center for Civic Design: UsabilityInCivicLife.org A Web For Everyone Accessibility](https://reader035.vdocuments.mx/reader035/viewer/2022070413/5697bf921a28abf838c8ee46/html5/thumbnails/18.jpg)
18
7 | Plain language: creates a conversation
Clear summary
States risk in text
.. and visually
Invites action
18
![Page 19: Whitney Quesenbery WQ usability.com | @whitneyq | slideshare/whitneyq Center for Civic Design: UsabilityInCivicLife.org A Web For Everyone Accessibility](https://reader035.vdocuments.mx/reader035/viewer/2022070413/5697bf921a28abf838c8ee46/html5/thumbnails/19.jpg)
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
![Page 20: Whitney Quesenbery WQ usability.com | @whitneyq | slideshare/whitneyq Center for Civic Design: UsabilityInCivicLife.org A Web For Everyone Accessibility](https://reader035.vdocuments.mx/reader035/viewer/2022070413/5697bf921a28abf838c8ee46/html5/thumbnails/20.jpg)
20Support different reading styles and perception
http://www.careerinfonet.org/finaidadvisor/earnings.aspx?nodeid=21 20
![Page 21: Whitney Quesenbery WQ usability.com | @whitneyq | slideshare/whitneyq Center for Civic Design: UsabilityInCivicLife.org A Web For Everyone Accessibility](https://reader035.vdocuments.mx/reader035/viewer/2022070413/5697bf921a28abf838c8ee46/html5/thumbnails/21.jpg)
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
![Page 22: Whitney Quesenbery WQ usability.com | @whitneyq | slideshare/whitneyq Center for Civic Design: UsabilityInCivicLife.org A Web For Everyone Accessibility](https://reader035.vdocuments.mx/reader035/viewer/2022070413/5697bf921a28abf838c8ee46/html5/thumbnails/22.jpg)
22
8 | Accessible media: supports all senses
22
Shape
Color
Text
![Page 23: Whitney Quesenbery WQ usability.com | @whitneyq | slideshare/whitneyq Center for Civic Design: UsabilityInCivicLife.org A Web For Everyone Accessibility](https://reader035.vdocuments.mx/reader035/viewer/2022070413/5697bf921a28abf838c8ee46/html5/thumbnails/23.jpg)
23
Meaningful alternatives for visual information
What’s the right alternative text for this image?
23
![Page 24: Whitney Quesenbery WQ usability.com | @whitneyq | slideshare/whitneyq Center for Civic Design: UsabilityInCivicLife.org A Web For Everyone Accessibility](https://reader035.vdocuments.mx/reader035/viewer/2022070413/5697bf921a28abf838c8ee46/html5/thumbnails/24.jpg)
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
![Page 25: Whitney Quesenbery WQ usability.com | @whitneyq | slideshare/whitneyq Center for Civic Design: UsabilityInCivicLife.org A Web For Everyone Accessibility](https://reader035.vdocuments.mx/reader035/viewer/2022070413/5697bf921a28abf838c8ee46/html5/thumbnails/25.jpg)
25
9 | Universal usability: create flow and delight
Simple.com25
![Page 26: Whitney Quesenbery WQ usability.com | @whitneyq | slideshare/whitneyq Center for Civic Design: UsabilityInCivicLife.org A Web For Everyone Accessibility](https://reader035.vdocuments.mx/reader035/viewer/2022070413/5697bf921a28abf838c8ee46/html5/thumbnails/26.jpg)
26
When everyone has a place at the (design) tableWe can design a web for everyone
Photo: mtstcil.org andITIF/CATEA26
![Page 27: Whitney Quesenbery WQ usability.com | @whitneyq | slideshare/whitneyq Center for Civic Design: UsabilityInCivicLife.org A Web For Everyone Accessibility](https://reader035.vdocuments.mx/reader035/viewer/2022070413/5697bf921a28abf838c8ee46/html5/thumbnails/27.jpg)
27
Have a new perspective
Photo: AIGA Dessign for Democracy and blog.metmuseum.com27