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!
- Validate Your HTML: W3 Validator this is the official web validator
- Validate More Deeply: Wave Toolbar helps find accessibility issues in your html
- Test Keyboard Navigation: Run through your whole site / app using only the keyboard.
- Get a screen reader and test: JAWS and NVDA are 2 popular ones
- Read: WebAIM has resources and articles about web accessibility
Internet Explorer 8 Comparison
I spotted this tweet a few days ago:
There.s more users with disabilities than people using IE8. Still, we tend to drop accessibility in favour of IE8 support. #fronteers14— Rik Schennink (@rikschennink) October 10, 2014
And this one the next day:
"There's more users with disabilities than users of IE8" But: IE8 is easy to simulate. Make it easier to simulate disabilities.— Jeff Atwood (@codinghorror) October 11, 2014
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.
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.
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
"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:
- WebAIM - I've mentioned them a few times already :D
- Web Accessibility Initiative - this is from W3C
- Creating Accessible Websites - from American Foundation for the Blind
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.