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.
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)
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:
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
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
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
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.)
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)
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
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)