Orion/Web Accessibility Starting Point

Web Accessibility: Where to Start?

Learning web accessibility is sometimes just a matter of getting started... there's so much info that it can be overwhelming.

Here's what I would recommend:

1. Take the Google Accessibility online course - it's free, and it's pretty good. Note that the Chrome Accessibility Developer Tools extension that is installed during this course is an excellent tool for finding basic accessibility problems. Learn it - use it. (Note also that the ChromeVox screen reader is not used all that much, but it's ok for the course).
2. Make sure you know the HTML5 elements - that sounds very basic, but you get free accessibility (for free!! really!!) when you use a native HTML5 element whenever possible instead of just div and span. Bookmark the HTML5 spec for reference, and then scroll through the table of contents for section 4 The elements of HTML.
3. Read the 5 Rules of ARIA Use.
4. Bookmark the WAI-ARIA spec for reference.
5. The WAI-ARIA Authoring Practices document is excellent, but really long. (Anyone who reads it all will be really familiar with web accessibility). Here are some of the key sections (although all sections are useful):
   1. I know I said "go native whenever possible", but sometimes you just have to use div and span and js and css. For that, follow these 13 steps.
   2. Know where to find the Design Patterns Table for recommended roles, states, properties and keyboard interactions of typical custom widgets.
   3. Understand tabindex and its relation to tab traversal (and don't use tabindex>0 unless you fully understand the side effects).
   4. Understand what ARIA landmarks are, and use them.
   5. Labeling and describing are very basic to accessibility.
   6. Understand what live regions are - you may need them.
6. Marco Zehe's Web Accessibility Basics article covers most of the basics in a short time.
7. Good keyboard accessibility is really important. Unplug your mouse and test your product using only the keyboard.
8. Then get in there and try using a screen reader. If you mostly develop on Windows, I recommend starting with Firefox (it has better screen reader accessibility than Chrome and IE) and getting a copy of the free screen reader NVDA (you can select "no donation for now", but if you use it a lot, spot them a donation - they're good guys). If you develop on Mac OS X, use the VoiceOver screen reader with Safari. Start it (and stop it) by typing Cmd+F5. The best way to learn VoiceOver is to go to youtube, search "VoiceOver on Mac" and watch a few getting started tutorials.