Copyright 2011 by WebAIM, used with permission. "Introduction to Web Accessibility" was presented at the Center for Health Literacy Conference 2011: Plain Talk in Complex Times by Jared Smith, Associate Director, WebAIM. Description: This training session will teach the principals of Web accessibility and demonstrate how users with disabilities interact with Web technologies. Participants will also learn about the legal guidelines and international standards for website accessibility compliance.

1. A Principles-Based
Approach to Web
Accessibility
Jared Smith
http://webaim.org

2. Test Questions
1. True, False, or I don’t know
My web content is currently
accessible.

3. 2. The five main categories of disabilities
affected by Internet accessibility
barriers are...

4. 3. Web accessibility is easiest to implement
A. As the culminating step after user tests
B. As an integral part of the design process
C. By creating an alternative version
D. After receiving a complaint by a person
with a disability

5. 4. Which of the following is cited most
regarding inaccessible web sites?
A. I wasn’t aware of the problem
B. Accessibility will hinder the look/feel/
functionality
C. I didn’t know how to make it accessible
D. We don’t have the budget to make it
accessible

6. 5. True or False
Accessible web design benefits only
a small percentage of the
population.

7. Accessibility
“Development of information
systems flexible enough to
accommodate the needs of the
broadest range of users...
regardless of age or disability”
8.5% of the population has a
disability that affects computer use

8. The Evolution of Web
Accessibility Guidelines
• WCAG 1.0 (1999)
• Section 508 of the
Rehabilitation Act (2001)
• WCAG 2.0 (2008)

9. WCAG 1.0
• Finalized in 1999
• Checkpoint driven
• Priority 1, 2, and 3 (Level A, AA, and
AAA)
• Specific to HTML

10. Section 508
• Legalistic - easy to verify compliance
• Applies to federal government
• Very limited in scope. The de facto
standard.
• guidelines.
Many states have adopted the
• Currently being updated

11. WCAG 2.0
• Finalized December 2008
• Principles Based
• Technology Agnostic
• Maintains Levels (A, AA, and AAA)

12. Americans with
Disabilities Act
• Pre-dates the web
• “Places of public accommodation”
• Currentthe web to expand ADA to
include
proposal

13. Your site can be
compliant, yet
inaccessible

14. Your site can be
technically accessible, yet
functionally inaccessible

15. Web Accessibility
... it’s not rocket surgery!

16. ... but don’t bite off more than you can chew.

17. P
O
U
R

18. P erceivable
O perable
U nderstandable
R obust

19. Ensure POUR content
across disability types
Vision - blind, low-vision, color-
blind
Deaf and Hard-of-hearing
Motor
Cognitive
Seizure

20. P erceivable
O perable
U nderstandable
R obust

21. Perceivable

22. Perceivable -
Auditory Disabilities
•Captions for video & live audio
• Text transcripts for all audio
content

23. Perceivable - Visual
Disabilities
• Web pages are linear
• Use meaningful links. Avoid “click here”.
• Alternative text for non-text elements
• Page is readable and functional at a minimum
of 2X zoom and 2X font size

24. Perceivable - Visual
Disabilities
• Associate text labels with form elements
• Associate data cells to row/column headers
• Sufficient contrast - http://webaim.org/
resources/contrastchecker/
• Ensure that meaning is not conveyed with
color alone

25. You’ve won the lottery! Press the GREEN
button to accept your prize and the RED
button to decline.

26. You’ve won the lottery! Press the GREEN
button to accept your prize and the RED
button to decline.

27. The green mushrooms listed here are
OK to eat. The red mushrooms will kill
you.
• Amanita
• Chanterelle
• Porcini
• Shitake
• Tylopilus
http://colorfilter.wickline.org/

28. The green mushrooms listed here are
OK to eat. The red mushrooms will kill
you.
• Amanita
• Chanterelle
• Porcini
• Shitake
• Tylopilus
http://colorfilter.wickline.org/

29. vs.
Vitally Important Text

30. P erceivable
O perable
U nderstandable
R obust

31. Operable

32. Who does this affect?
• Motor disabilities
• Fine motor control and use of a mouse
• Repetition and fatigue
• Control over timing or moving elements

33. Be careful with flashing/
strobing images
• More than 3 times in any one-second
period
• Size, brightness, and red threshold
• Annoying rule
• WARNING: This page can cause seizures
- fletchowns.net/what.html

34. Operable
• Ensuring keyboard accessibility
• Don’t remove focus indicators
• Ensure links are clearly distinguishable
• Logical reading/navigation order
• Consistent navigation elements

35. Operable
• Allow user to skip over repetitive and/
or lengthy lists of links
• Error-prevention and recovery
mechanisms
• Give user the control over time-
sensitive changes

36. Secret of Everlasting
Happiness

37. Secret of Everlasting
Happiness
Please finish reading this text
– it will give you the secret to
everlasting happiness. The secret
is simple, all you need to do is to stop
worrying about the key to everlasting
happiness and enjoy the moment.

38. Secret of Everlasting
Happiness
Sorry! Time’s up!
Better luck next time!

41. Separate content/functionality
from visual design

43. Web Developer Toolbar for Firefox

46. FAIL!

47. Can you have too much accessibility?

48. Direct users to content

49. P erceivable
O perable
U nderstandable
R obust

50. Understandable

51. Who does this affect?
• Cognitive disabilities
• Largest disability group. Larger than
all the others put together.
• Everyone!
• Because users vary greatly, we’ll focus
on generic recommendations

52. Understandable
• Be careful with movement and
other distracters
• Semantic organization (headings,
lists, etc.)
• Be consistent.
• Strive for brevity. Use the simplest
language possible.

53. Understandable
• Focus the user’s attention
• “Chunk” and/or simplify content
• Balance cognitive load vs.
funtionality

54. Understandable

55. Understandable

56. P erceivable
O perable
U nderstandable
R obust

57. Robust

58. Robust

59. Robust

60. Robust

61. Robust

62. P erceivable
O perable
U nderstandable
R obust

63. wave.webaim.org

64. Thank You!
Jared Smith
http://webaim.org
Web based forums
E-mail discussion list
Tutorials, articles, and resources
Blog
Accessibility Reference Guide