About a week ago I launched a new website for the AccessABILITY Student Union at the University of Oregon (with a kickass CMS built on the jQuery UI). Coding the new site meant paying extra-special attention to web accessibility standards. So I thought I’d share some tips with you for making your websites more accessible to your visitors.
Web accessibility also benefits people without disabilities. For example, a key principle of Web accessibility is designing Web sites and software that are flexible to meet different user needs, preferences, and situations.– Introduction to Web Accessibility
To begin with, think about how your visitors are accessing your website. Are they using a web browser on their desktop? If so, are they using Internet Explorer, Firefox, Safari, Google Chrome or Opera? Maybe they’re browsing your site from their mobile phone or a netbook. If they’re visually impaired they might be using a screen reader or some kind of zooming software. If they have a physical impairment they might be using a keyboard-like input device instead of a mouse (which makes clicking slightly trickier).
The point is that your site’s visitors are using a diverse set of tools to access to information that you’re providing. You need to make sure that information is as easily accessible to as many of these people as possible.
Be Standards Compliant
Writing standard’s compliant markup is the best thing you can do to ensure your content is easily accessible across the board. Make sure you validate your HTML and CSS markup with the W3C Validator first, before you ever push it into production.
CSS, Site Flow and Markup
Make sure your site is laid out in a sensible manner. Pay particular attention to the flow of the content with styles turned off (in Firefox View->Page Style->No Style). Your site header and navigation should be at the top and the page content should flow from there.
Content should make good use of the h1 to h6 tags. Screen readers use headers to break your site up into content blocks, which make navigating the page easier for users with visual impairments.
Employ font-size in em’s or percentages to allow visitors to easily resize the text in their browser. There’s a reason large-print books exist.
Images should have descriptive alt text. Avoid ambiguous descriptions like alt="Image 1". Instead, include useful descriptions like alt="The Heceta Head Lighthouse at sunset on the Oregon Coast". Don’t include unnecessary alt text for images that are purely decorative, such as alt="rounded corner right", as this will only create more clutter for screen readers.
Tables should employ descriptive row and column headers. Screen readers rely on this information to help orient your visitor.
Avoid providing information solely by color. Highlighting clearance items in red won’t help someone who’s color blind. Try tagging items with the word clearance instead.
Give the Fangs plugin for Firefox a whirl. It does a decent job emulating some of the basic functions of screen readers. You can even pair it with Mac OS X’s text-to-speech function. This will give you an idea of how screen readers see your site content.
Javascript and AJAX
Avoid using JavaScript for styling site navigation, as CSS can almost always be used instead. Keep in mind that many visitors may have Javascript disabled. It’s important that your web application is able to degrade gracefully in these situations.
Be aware that many screen readers, such as JAWS, use a “Virtual Buffer” to cache your site markup and parse it out to the visitor in a sensible way. Using AJAX to modify the site content “on the fly” will often leave the buffered content outdated, and the visitor is left with few clues as to what has changed until the buffer is refreshed. See this article for more information.
Multimedia Content
If you provide multimedia content, like a podcast or video, make sure you provide the core information in other formats, such as linear notes.
Avoid using Flash content unless absolutely necessary, especially for key features like site navigation.
Additional Resources
