A friend and colleague of mine, Ian Reed, is a competent and talented software engineer. His skills and knowledge alone are impressive enough, but Ian has one additional hurdle that most of us take for granted: he is visually impaired. Through screen readers, a braille display, and hundreds of hours of focused practice, he has honed in his ability to cut some mighty fine code.

A few weeks ago, I asked him to compile a list of best practices that web designers and developers should have in mind when building website and web applications. He took a pragmatic approach, focusing on items that are good habits whether or not one has accessibility in mind.

Below is the list Ian came up with. They are listed roughly in order of how important coupled with how easy they are to implement.

Quick Summary:

• Good use of Heading tags
• Use label tags on textboxes and dropdowns.
• Avoid using tables in strange ways to accomplish visual layout
• If using captchas make sure you provide an audio captcha

#1 Good use of Heading tags
When using a screen reader to access a web page you are essentially presented with the web page as one large document of text.  You are only allowed to read one line at a time.  The most frustrating problem here is that you cannot just scan the page with your eyes to find the part of the page you want (usually the main content of the page.)  Fortunately screen readers provide special keys to jump between links, headings, tables etc. in a page.  So if the page has a heading tag before all the main content of the page a blind user can quickly jump to the main content.  I abhor pages that have no heading tags at all.

Additionally good use of heading tags for subsections of your document can be very helpful for a blind user to navigate to different parts of your page.

#2 Use label tags on textboxes and drop downs
When a blind user gets to the first input in your form they will generally fill it out and tab to the next one.  If you have properly associated a label tag with that input field then the name of the field will be announced, otherwise the blind user has to exit the input field and navigate back a bit to see what the input is for.

#3 Avoid using tables in strange ways to accomplish visual layout
Tables are a good idea when showing data in a grid format.  Many old websites use tables to handle their layout but there are much better ways to do this using divs and css.  The problem is that screen readers will announce the table cells row and column which is helpful when working with data in a grid but annoying when the table is used as a hack to get the visual layout working.

#4 If using captchas make sure you provide an audio captcha
Obviously since blind users can’t see a captcha image having an audio captcha option is very important.  It’s also important to test your audio captcha a few times and make sure it works well.  I’ve seen some audio captchas that were very hard to get right.  Facebook and linked in currently have a good audio captcha.

Thanks Ian! While I’m sure there are a dozen or so more tips, I think this is a great list to keep in mind when developing content for the web.