The most effective way to build an accessible site is to write good markup

The Easy Way to Accessibility

If you produce well written HTML you shouldn’t have to do anything clever to make your site accessible. It will be surprisingly easy. A quick review of your site with a few important ideas in mind will suffice to ensure that everyone has access.

Tools for people with impaired vision are built to consume markup. These tools work well but they can only do their job if you structure your web pages in a logical and semantically correct manner. The more you veer away from web standards the harder it will be for a screen reader to parse your page, so it’s the ostensibly clever things you might do that cause problems. If you are a stickler for web standards and semantically correct markup, you are going to have a very easy time when you review the accessibility of your site.

The rules to follow are then the same that designers have espoused for years to everyone: Use tables for tabular data not for positioning. When you have a list of elements – like navigation – use ordered and unordered lists. Your headings should map logically onto your document: Use an h1 for the “title” and then h2’s and then h3’s for sub and sub-sub headings. Don’t randomly skip right down to h4’s. Keeping these in mind while building your site, there are a few simple and specific things you can do to make your site better:

Unplug Your Mouse
If you only use the keyboard can you still complete all the tasks a user might want to do? Have you checked out the latest iteration of your sign-up flow? (That is where we had a bug recently at Inigral). If a button is out of reach when you tab through the page or a navigational element only appears when you hover the mouse over it, you are going to be locking out some of your audience.

Quick Tips for Accessibility: Make a Big Difference with a Little More Effort
Add alt tags to images. If you have a picture of a family eating a picnic on a beach then drop that into the alt tag. Otherwise, someone who can’t see that picture will be stuck with nothing but the knowledge that they are missing out. Try not to rely on images and color differences for labels and navigation. Use images as an extra.

Use labels on forms. It can be tempting to add what would be the label for a text area into the text area itself as the default text and forgo labels, but this will be lost on a screen reader. Without a label a lone text area is a total mystery.

Make link texts sensible outside of their immediate context. A link titled “edit my profile” makes a lot more sense than one that just says “edit,” especially on a page with a lot of information and actionable items. A great navigational feature of screen readers is they will look at all the links on the page at once, so descriptive links will let users of screen readers quickly map out your site and accomplish their goals on your site.

Experiencing your site for yourself
If you have never used a screen reader before I highly recommend trying one out! You may never become proficient at it but it is very interesting to understand how they work. The two main tools are JAWS for Windows and VoiceOver for Mac. You can download a free demo of JAWS. VoiceOver is included with in Mac OS X v10.6.

For everyday use, you might find it faster and simpler to read your website with Fangs. Fangs is a screen reader emulator and will give you a good impression of what a screen reader will read when visiting your site.