Tips for Creating a 508 Compliant Website

In my first post around website accessibility I covered some of the history and issues around creating a 508 compliant website. Below are some tips to truly make your website accessible to web users with any neurological, physical or visual disabilities.

Use Alternative Text for Non-Text Content

1. Label Graphics and Images

Add ‘alt-text’ to graphics for screen readers
Describe the function of the image. Especially if the image is a link, “Search the Card Catalog” is much more useful than “Photo of a collection of books and other reading materials scattered on a library table.”
Brief is better. Remember, syllables are time.
Put the most essential information first. If it is necessary to use a number of words, use “Acme Logo: Sun rising over white sand dunes” rather than “Sun rising over white sand dunes: Acme Logo”

Image with alt-text — An example of an image with the ‘alt-text’ field properly used for the benefit of the visually impaired.

2. Use Meaningful Title Attributes

A meaningful title attribute, seen when the mouse is placed over the link and read by screen-readers.

Title attributes as short summaries that describe where a hyperlink will take the user who clicks on it. It doesn’t help if the title attribute is the same as the link text.

3. Name Links Carefully

Users using screen-readers often move through a page by tabbing from link to link. “Click here” does not stand alone well, but “Find a Store” is self-explanatory.

Click here example — Using “click here” for your hyperlink text is a bad practice. If a screen-reader listed all the links on a page, those words would have no context or meaning.

Use Skip Navigation

Screen-reader users have to read HTML documents from top to bottom, without the ability to scan the web page for the information they’re interested in. Skip navigation allows screen reader users and people who can’t use a mouse to skip long lists of links, such as the primary navigation on a website.

Skip navigation example — An example of skip navigation on the new Target website.

Use Distinct and Meaningful Page Titles

Screen readers first read the text inside the page <title> tags. This creates problems such as:

Users cannot determine what page they are on.
If a user arrived on a page via link, and the title is the same or non-existent on both pages, it’s difficult to determine if the link worked without scanning the contents of the page.

A Good Title Tag — Here is a well written <title> tag. Notice the most important information is at the beginning.

Use Headings Correctly

Heading tags allow screen reader users to jump to the sections they’re interested in by semantically creating an outline of the web page.

Breaking up a long web page into logical subsections with headings makes it easier to get to your location of interest.

Window-Eyes Headling List — Here’s what a screen-reader sees when all the “headings” on the page are listed.

Make Forms Accessible

1. Label Your Form Elements

Labeling your input elements with meaningful and descriptive text makes it clear to the user what information they should be providing. This helps screen reader users know what data is expected for the inputs in your form. Using a label also expands the clickable area of an input making it easier for keyboard users with limited mobility.

2. Explicitly State Information

Indicating required fields in a form by making them bold is bad. Indicating required fields by using a phrase such as “required” is good.

3. Explain Select Menus (Pulldown Menus)

The default item in the select menu should clearly define the purpose of the box. For example, “Select Age Range” is preferable to “18-25.”

A pull-down menu — The default option in the menu describes it’s contents.

Site Testing Tools

Here are some useful tools for testing your website’s accessibility.

June 3, 2013 — Digital / Social