This page explains how to integrate web accessibility evaluation into your web production process. While it is always good to have accessibility in mind when you are coding your site, it is helpful to have certain issues foremost in your mind at each stage.
WebAIM has published a nice accessibility infographic for web designers. A text version is also available following the image.
The design phase
There are accessibility concerns at the very beginning of a web project before a single line of code is written. Before the stakeholders see the prospective designs, the prototypes should be scrutinized for accessibility problems. The following factors should be evaluated during the design process:
- The page designs must have sufficient color contrast. The text and background should be checked with a color contrast analyzer to ensure that low-vision and color blind users can read the page.
- The default text size should be large large enough for older people and folks with visual impairments to read. (See Jared Smith’s provocative article, “Web Accessibility Preferences Are For Sissies” and WebAxe’s “No to Text Resize Widgets”).
- The navigation should be simple and the visual layout clean and not distracting to those with cognitive disabilities.
Building the template pages
It is during the production stage that you get the most accessibility for your money. Accessibility takes a half-hour to an hour of production time to implement in making the web templates. Getting the templates right gets you 90% of the way towards making your site accessible. Issues to keep in mind when building your templates:
- Validate your code with the W3C validator to ensure it will work with assistive technology.
- Avoid using tables for layout purposes and instead use CSS.
- Set up your skip navigation links.
- Implement document landmark roles.
- Define a unique title for each page.
- Place the
<h1>heading directly before the main content, and make sure it matches at least part of the
<title>. Do not use the site name in the
<h1>tag for any page but the home page.
- Specify a DOCTYPE and language definition for each page.
Populating the website
When filling in the content of your website you must still be aware of the accessibility implications of your code. The following pointers address the most common errors of website content:
- Use a proper heading hierarchy to organize your page. The
h1tag lets the assistive tech user know where the content begins on your page, and the other heading tags show how the page is organized.
- Use correct markup for your data tables.
- Make sure your form controls and data entry fields are labeled.
- Give your images meaningful
- Caption and make transcripts for your video, and make transcripts for your audio.
Launch and maintenance
Because websites are living documents, it is important to keep tabs on the accessibility of your site throughout its life cycle. On your contact page, be sure to include a contact for web accessibility complaints along with your webmaster contact so that people who use assistive technology have a channel to report accessibility issues—even if you’ve done your due dilligence, you can’t catch everything in the development phase. You should also post an accessibility statement page that includes contact information. See this site’s accessibility statement.