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.
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
- Use the following rules of thumb in creating title tags for images:
- All images must have a
- Decorative images should be used as a background. If it needs to be on the page, it must have an empty
- For images that communicate important content, provide a description of the content of the image
title="Photograph of a dog chasing a bunny"
Use table headings
If you use a table that has logical headings, the first row must use the
<th> tag instead of the
<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.
<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" />
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: