Making Your Site 508 Accessible

In this post, I want to list the pertinent items for 508 Accessibility within a website. Before we get into the specifics, let’s discuss ‘508 Accessible’. What is it? And, why is it important?

The idea of 508 Accessible was developed so that sites (and other electronic documents) could be accessible by more people. Originally it was for the visually- or mobility-impaired, but it now also applies to individuals who view web pages on small devices.

Although there are no laws requiring a site to be 508 accessible, there are guidelines to follow that increases the accessibility of a site. I read recently that if a website isn’t 508 accessible, we may be missing up to 20% of the audience. That audience continues to grow as more and more people view websites on their cell phones, blackberries, etc.

There are 4 main items that I look for when making a site 508 Accessible. There are more in the 508 Checklist, but these items seem to take most of my attention when I am making a site 508 Accessible.

Use the alt attribute with the img tag.

<img src=”../images/logo.gif” alt=”company logo”>

The alternative text is a textual replacement for the image. Screen readers or small devices may ignore the image, but they will announce or print the alternative text. The alternative text should be informative and relevant to the content of the page.

Avoid adding unnecessary information within the alternative text. For example, “company president” is better than “photo of company president”.

If the image is more for decorative purposes, consider using a null value for the alternative text.
Example: <img src=”bullet.gif” alt=””>

This meets the 508 Accessible guidelines, yet doesn’t cause irrelevant information to be conveyed.

Title your page and use headings to organize information

Use the <title> tag to provide a descriptive title for that page. Assistive technology uses this to identify the page for the user. The use of the heading tags (<h1>…<h6>) helps organize the information when listening to the web page, just like it does when viewing the page.

Use Cascading Style sheets to define style and the visual presentation of a page.

This aids in separating the presentation from the actual content. It is the content within the html code that the screen readers read. The more the code just contains content, the easier it will be for the user of assistive technology to understand your page. Furthermore, the use of cascading style sheet allows the reader to set their own style for best viewing or reading of the webpage.

Use relevant text to describe a link versus ‘click here’.

The link text should specify what the link is pointing to. Most screen readers precede a link with the word(s) ‘link’ or ‘link to’. It is more helpful to hear ‘link to home page’ vs ‘link to click here’.

There are other pertinent items I watch for, but these are the ones I deal with most often when I am developing a 508 Accessible website.

Before closing, I’d like to suggest a toolbar and 508 Accessible validators that aid in developing 508 Accessible sites. There are a number of 508 Accesssible validators available for a fee that will test your entire site. If you want to test an individual web page for 508 Accessibility, I recommend checking out http://www.contentquality.com or http://www.section508.info. And, a highly recommended 508 Accessible tool bar is available at Web Accessibilty Toolbar. To quote a recent user of the toolbar, “It is a terrific tool for anyone interested in accessibility.”

If you want to increase your potential audience size, consider making your sites 508 Accessible.