Coding for Accessibility

Providing real accessibility to disabled users has very little to do with the requirements of the law defined by Section 508 of the Americans with Disabilities Act (ADA). It has much more to do with understanding how these users use the Internet and the limitations and characteristics of the tools that they are required to work with to access the Internet.

For example, blind users typically use screen readers, such as JAWS, to access websites. Unlike your eye, screen readers cannot "scan" a page for relevant headings or words. They have to read every single word on the page, from top to bottom.

With that mind, Web developers can begin to understand the importance of accessibility requirements and best practices, such as:

  • Providing a way for users to skip past the navigation at the top of every page (this can be “hidden” in the document for everyone else)
  • Providing in-page navigation so that users can find out what's on a page without having to hear the whole thing
  • Providing a quick way to go back to the top of the page

However, these rules of thumb aren't only applicable for disabled users. They can also make websites more usable and accessible for non-disabled users. The consideration for disabled users turns out to be excellent practices for making sites easier to use for all users, and crawlable for search engines.

To get an idea of how a disabled person will "see" the page, disable Styles and Images in Firefox's Web Developer toolbar, or use the Fangs Firefox extension.

Provide title attribute with all images

One of the main requirements of section 508 is that all images must have a textual equivalent. In HTML, this is accomplished using the title attribute. The purpose of the title attribute is to provide a description of the contents of the image for those users who cannot see the image. All images must have an title attribute in order for the page to pass Section 508 requirements.

However, not all images convey content relevant information. For example, small images are occasionally used as visual spacers on a page, but contain or convey no relevant information. Such images do not require a description, though they do require a title attribute.

    Use the following rules of thumb in creating title tags for images:

  • All images must have a title tag
  • Decorative images should be used as a background. If it needs to be on the page, it must have an emptytitle attribute (title ="")
  • For images that communicate important content, provide a description of the content of the image

CORRECT:

    title="Photograph of a dog chasing a bunny"

INCORRECT:

    title="Photo"
    title="Product Image"

Use table headings

If you use a table that has logical headings, the first row must use the <th> tag instead of the <td> tag.

EXAMPLE:

<tr>
<th scope="col">Item</th>
<th scope="col">Quantity</th>
<th scope="col">Price</th>
<th scope="col">Total</th>
</tr>

You can also use the <th> tag for row headings, assuming that is appropriate.

EXAMPLE:

<tr>
<th scope="row">Item</th>
<td>[Item 1]</td>
<td>[Item 2]</td>
<td>[Item 3]</td>
<td>[Item 4]</td>
</tr>

Use labels for form elements

The most common technique for making forms more accessible is using <label> tags to identify each form element (text field, checkbox, radio button, etc.). Labels can appear before or after the form element. It is mandatory to attach label using the for element, since it allows more flexibility in the placement of the label. Labels can be used for all form elements: checkboxes, radio buttons, select lists, and buttons (though labels are not required for buttons). Labels are required, however, they can be hidden to the screen display, if necessary. Here is the standard code for a text field within a form:

<label for="fieldID">Text Box Label</label>
<input type="text" name="fieldName" tabindex="1" id="fieldID" />

Note: The for is linked to the field ID, not the name, and is mandatory.

Use a tab index to order form elements

The purpose of the tab index is to specify the order in which form elements will be selected when the user presses the tab key. Form elements can be organized so that users can easily tab through the form in any order they wish. Below is an example of using the tab index for a generic contact form:

<label for="name">Name</label>
<input type="text" name="txtName" id="name" tabindex="1" />

<label for="email">Email</label>
<input type="text" name="txtEmail" id="email" tabindex="2" />

<label for="phone">Phone</label>
<input type="text" name="txtPhone" id="phone" tabindex="3" />

<label for="comments">Comments</label>
<textarea name="txtComments" id="comments" tabindex="4" rows="8" cols="40" />Enter your comments in this box.</textarea>

<input type="checkbox" name="chkSubscribe" id="subscribe" tabindex="5" value="1" />
<label for="subscribe">Send me more spam!</label>

Users should be able to skip navigation

Section 508 of the Americans with Disabilities Act (ADA) requires that "a method shall be provided that permits users to skip repetitive navigation links." As a result, each page will require a "Skip to content" link at the top that will jump to the content area of the page. To implement this strategy, include the following on the top of every page:

<!-- Skip to content link for accessibility purposes -->
<dl class="skip">
<dt><a href="#content" accesskey="c" tabindex="1">skip to content</a></dt>
<dt><a href="#mainNav" accesskey="n" tabindex="2">skip to navigation</a></dt>
</dl>

Once you have the link at the top of the page, you will also need to add an id attribute to the content parent tag:

<div id="content"></div>

 

Post a New Comment

Your feedback will help us improve this page. If you have a comment about the content of this page, use the form below, and the Patterns Team will get back to you within a business day.

For general questions or assistance, email the Patterns Team directly.