Drofmij

Hello my name is Jim and I'm a software developer. You can find me on twitter as @originaldrofmij.

Abbreviated Developers Guide to Web Accessibility

TL;DR

It can be difficult to build accessible web sites and web applications. If you don't design and build with accessibility in mind your site or app can be difficult or impossible for some people to read or use. There are some tools and resources that will help make your stuff accessible.

Start here! Do these!

Internet Explorer 8 Comparison

I spotted this tweet a few days ago:

And this one the next day:

After reading some of the replies on twitter, I realized that this is a topic I care deeply about. I want to build web sites and web apps that are more accessible and I want to see other developers do the same. I want the software and pages that I build to be usable and readable by everyone. I will not through laziness ignore tools and techniques that can make the web a more usable and accessible place.

Backstory

I've been working with web technologies for a bit more then 10 years and I dabbled for another 10 before that. I didn't really think much about accessibility during most of that time. I did eventually find the W3 Validator and started putting alt tags on images and matching labels for form inputs. But I really didn't have a clear view of the bigger picture of accessibility.

The Problem

Poor coding and shiny new web development techniques can break accessibility to websites (and web apps). This can make keyboard navigation impossible and prevent a screen reader from reading content and forms on your site or web app.

What You Can Do

I work for a US government contractor and we target 508 compliance for our web applications and sites. The following are some of the tools and resources we use:

Validate Your HTML

W3 Validator is the official validator of the web. Valid HTML code helps make a site more accessible. This is stuff like proper tag nesting, form labels, alt tags for images and other bits. With validated HTML a screen reader is more likely to read your site correctly in an understandable way.

Validate More Deeply

Wave Toolbar helps you find issues such as mismatched or orphaned form labels, missing alt tags, color contrast issues, and other potential accessibility issues. Wave also has a website version of the tool: WAVE.

Test Keyboard Navigation

Alot of web developers already know this one, but I'm going to say it anyway. Navigate through your entire page / app with keyboard only. Try out the forms and widgets. Does the tab order make sense? Do you have elements that are reversed in the html because of float: left? Keyboard will navigate through them backwards. You can adjust some of keyboard navigation by setting tabindex on elements. WebAIM has a helpful article about tabindex

Screen Readers

"A screen reader is a software application that attempts to identify and interpret what is being displayed on the screen" — Wikipedia

According to the WebAIM's Screen Reader User Survey the most common screen reader among those surveyed was JAWS from Freedom Scientific. JAWS is great, but it is expensive, about $1000 per license. You can use the trial version for testing but you will need to reboot every 40 minutes. The second most common screen reader is NVDA. NVDA is free and open source.

Pick one and test your page with it. Read through the whole thing, make sure the navigation works and makes sense while being read. WebAIM has a great article about for this: Using JAWS to Evaluate Web Accessibility

Read and Learn

Here are a few resources to learn more:

Finale

I challenge all web developers: while you're thinking about mobile first, HTML5 and semantic web, remember to make the web more accessible.

If I got something wrong, or you have links for better resources, please let me know.