You know it's important for your web project to be accessible to people who use all kinds of assistive technology to access the internet. But all the guidelines for web accessibility you can find don't go much beyond "make sure all your images have alt text", and all the resources you can find treat "accessibility" as a synonym for "making your site work in a screen reader". You know there are other things you should be doing and other forms of assistive technology you should be accomodating, but all the best practices documents are a complicated morass of contradicting information (if you can find best practices documents at all.) Have no fear! This tutorial gives you a number of concrete steps to take to make things more accessible. This presentation has downloadable notes and exercises available at http://denise.dreamwidth.org/tag/a11y . Video of the talk should be available later.

1. Web Accessibility for
the 21st Century
Denise Paolucci, Dreamwidth Studios
denise@dreamwidth.org
http://denise.dreamwidth.org

2. Slides, resources, and
examples downloadable
at end of talk!

3. What do we mean by
“accessibility”?

4. “Accessibility” is about
making websites work
with assistive tech, not
against it.

5. Multiple standards
• W3C’s Web Content Accessibility
Guidelines
• WebAIM (Web Accessibility in Mind)
• US Government’s Section 508 Standards

7. :(
• Standards/guidelines are all very high level
• And have specific ideas about what
accessibility needs people have
• People have more accessibility needs than
you think

8. People think of:
• Blind/low-vision users using screenreaders
(Jaws, NVDA,VoiceOver)
• Users unable to type using dictation
software (Dragon)
• Users unable to mouse using keyboard-only
navigation/mousekeys

9. It’s not just about
screenreaders
(or dictation, or
keybord input)

10. What’s the most
commonly used
assistive technology?

13. Larger text size is the
most common assistive
tech on the internet
(even if you don’t think
it’s assistive tech)

14. Also:
• Stylish • Disabling autoplay/sound
• NoScript • AdBlock
• NoSquint • AutoPager
• F.lux • Workrave
• Disabling animation • TypeAhead Find
• “Zap CSS” bookmarks • ....etc

15. • Migraineurs
• People with cognitive disabilities
• Dyslexic users
• Colorblind users
• Deaf users

16. So how do you serve
all these accessibility
needs?

17. ...sometimes you don’t
:(
(but you can try!)

18. Don’t make a special
version: it never works

19. Universal Design
• Improves accessibility
• Improves your cross-platform support
• And your search engine visibility
• Everybody wins!

20. A light speed tour of
Universal Design
(this will not be on the exam)

21. Universal Design
Principles
• NC State University’s Center for Universal
Design has 7 principles
• Not all of them apply to web design
• The five that do are:

22. 1. Equitable Use

23. 1. Equitable Use
2. Flexibility in Use

24. 1. Equitable Use
2. Flexibility in Use
3. Simple and Intuitive Use

25. 1. Equitable Use
2. Flexibility in Use
3. Simple and Intuitive Use
4. Perceptible Information

26. 1. Equitable Use
2. Flexibility in Use
3. Simple and Intuitive Use
4. Perceptible Information
5. Tolerance for Error

28. those are REALLY high
level guidelines :(

29. • There are a lot of checklists for
implementing the high-level guidelines
• Many of them disagree
• A lot of the advice is outdated and not very
helpful

31. <i>Let's</i> be <b>ACCESSIBLE!</b>

32. <i>Let's</i> be <b>ACCESSIBLE!</b>
<em>Let's</em> be <strong>ACCESSIBLE!</strong>

34. Let’s be ACCESSIBLE!

35. Let’s be ACCESSIBLE!
Let’s be ACCESSIBLE!

36. Semantic markup isn’t
wrong...

37. But most screenreaders
don’t differentiate

38. (because most of the
web doesn’t
differentiate)

39. you are in a maze of
twisty little best
practices, all competing

40. and automated testing
tools don’t catch
everything

42. 31 Quick Techniques To
Make Your Site Better
These are all downloadable at the end, with exercises
and further reading :)

43. 1. Make sure all images
have alt attributes,
height, and width

44. Bad:
<img src="image.png" />

45. Better:
<img src="image.png" height=480
width=600 alt="Woman laughing
with salad" />
(writing good alt text is an art, not a science.)

46. 2. Use blank alt text for
purely decorative
images

47. Bad:
<img src="spacer-left-red.gif" />
<img src="spacer-left-red.gif" />
<img src="spacer-left-red.gif" />
<img src="spacer-left-red.gif" />
<img src="spacer-left-red.gif" />

48. Just as bad:
<img src="spacer-left-red.gif"
alt="spacer" />
<img src="spacer-left-red.gif"
alt="spacer" />
<img src="spacer-left-red.gif"
alt="spacer" />
<img src="spacer-left-red.gif"
alt="spacer" />
<img src="spacer-left-red.gif"
alt="spacer" />

49. Better:
<img src="spacer-left-red.gif"
alt="" />
<img src="spacer-left-red.gif"
alt="" />
<img src="spacer-left-red.gif"
alt="" />
<img src="spacer-left-red.gif"
alt="" />
<img src="spacer-left-red.gif"
alt="" />

50. Best:
Use CSS to place
purely decorative
images, not <img>

51. 3. Use header tags
(<h1>, <h2>, etc)
Screenreaders use those as jump-to points

52. 4. Add skip links
liberally
(Screenreaders use headers for navigation, but skip links
still save the time of skipping through all the headers.)

53. 5. In your source:
Content first, chrome
after
(and then position it visually using CSS)

54. 6. Use CSS to hide
screenreader-useful
things from visual
browsers
Use negative margins, not “display: none”

55. 7. Write link text
descriptively

56. Bad:
To manage your account, <a
href="link">click here</a>.

57. Better:
Visit <a href="link"> Account
Management</a> to change your
settings.

58. 8. Don’t rely on tooltips
or title text
Information in title tooltips is missed by large numbers
of your readers

61. 9. Don’t rely on alt
text, either
It’s nearly impossible to reach in most visual browsers

62. 10. Make title text and
alt text the same
This is controversial, since standards say they must be
different, but it’s the only way to avoid information
being unreachable.

63. 11. Explicitly label all
form fields
And put any important instructions inside the form, not
in a note outside the form

64. Bad:
<form>
Name: <input type="text"
name="name" />
</form>

65. Better:
<form>
<label for="name">Name:
</label> <input name="name"
id="name" type="text" />
</form>

66. Best:
<form>
<label for="name">Name:</label>
<input name="name" id="name"
type="text" aria-
labelledby="Name:"/>
</form>

67. Best:
<form>
<label for="name">Name:</label>
<input name="name" id="name"
type="text" aria-
labelledby="Name:"/>
</form>

68. ARIA or WAI-ARIA
• Web Accessibility Initiative-Accessible Rich
Internet Applications
• Labels and describes page content and
advanced “rich technology” like DHTML,
Ajax, JavaScript
• Client implementation spotty, but...

69. 12. Use WAI-ARIA
landmark roles
Client implementation is getting better and better, and
there’s zero downside to using it

70. 13. Use existing
JavaScript libraries
Don’t reinvent the wheel: JQuery isn’t 100% accessible,
but it’s better than rolling your own

71. 14. Make sure
everything has a
tabindex

72. 15. Put important things
earlier in the tabindex
Use this VERY SPARINGLY, but less-used items can be
later in the tabindex. (But don’t interrupt visual flow.)

73. 16. Don’t hide any
visible element from
the keyboard

74. Wikipedia’s article rating widget
Unreachable via the keyboard :(

75. 17. Never use tables
unless presenting
tabular data

78. 18. And if you need
tables, use <th>
headers (and ARIA
roles)

79. 19. Use <ul> or <ol>
instead of image based
bullets

80. Bad:
<img src="bullet.gif">Item One
<img src="bullet.gif">Item Two
<img src="bullet.gif">Item Three

81. Better:
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
(then add the image with CSS)

82. 20. Define all sizes in
em, not px or pt

83. 21. Restrict large blocks
of text to a narrower
width

84. 22. Check your color
contrast
Standards say no less than 4.5:1 and recommend 7:1,
but if possible, offer high-contrast and low-contrast
options, or let the user set their own colors

85. 23. Avoid large blocks
of pure white
background (cream or
grey is better)

86. 24. Provide light-on-
dark and dark-on-light
options

87. 25. Use at least two
ways of highlighting
information or errors

88. Remember earlier?
<form>
<label for="name">Name:</label>
<input name="name" id="name"
type="text" aria-
labelledby="Name:"/>
</form>

89. Forms of Highlights
• Color
• Outline
• Underline
• Text change
• ARIA label (role="alert")

90. 26. Retain user input
after errors

91. 27. Don’t change the
screen without user
action

92. 28. And if you do
dynamic content, let
people turn it off --
permanently

93. 29. Don’t use Flash or
PDFs: use plain text

94. 30. Caption all audio
and video (by people,
not machines)

95. 31. Consider
alternatives to
CAPTCHA

96. • Honeypot form field (with meaningless
name, informative label, and display:none)
• Server-side checks (referer, secret token,
length of time it took to submit)
• TextCaptcha.com: word-based CAPTCHA
problems

97. And finally...

98. 0. Test it yourself
You aren’t going to be as skilled with the assistive tech
as an experienced user, but you can approximate

99. • Double your font size and see what breaks
• Unplug your mouse and see what you can’t
reach or access
• Set your screen to black and white and see
what’s unclear or invisible
• Have a screenreader read you the page and
see what’s frustrating or missing

100. Thank you!
Resources
http://denise.dreamwidth.org/tag/a11y
(that’s A, number one, number one, Y)