Web Services

Web Services Internal Development Standards

Accessibility

Summary

Accessibility and the Law

In November 2003 the passage of SB 302 required that CSU Web sites meet the requirements of Section 508 of the Americans with Disabilities Act (ADA). Fresno State has a good summary of the Section 508 requirements.

In late 2006, the CSU Chacellor's Office presented the Accessible Technology Initiative (ATI), which requires that all CSU campuses begin a process of remediating Web pages to meet Section 508 accessibility requirements. Documentation on CSU, Chico's progress with the ATI can be found at the Information Resources ATI site.

Approaching Accessibility

But providing real accessibility to disabled users has very little to do with the requirements of the law. 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 Web pages. Unlike the human eye, a screen reader cannot "scan" a page for relevant headings or words. Screen readers have to read every single word on the page, from top to bottom.

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

But these rules of thumb aren't only for disabled users. They can also make Web pages more usable and accessible for non-disabled users. The things that we must do for disabled users turn out to be excellent practices for making sites easier to use for all users.

Accessibility Attributes in Dreamweaver

For the developer, perhaps the easiest way to increase the accessibility of Web pages is to use Dreamweaver's accessibility tools. These tools make it very easy to increase the accessibility of pages by prompting you to insert the accessibility attributes required by Section 508.

To turn on this feature:

  1. Select "Preferences..." from the Edit menu
  2. Click on the "Accessibility" Category
  3. Check "Form Objects," "Frames," "Media," "Images," and "Tables"
  4. Click "OK"

Accessibility Preferences in Dreasmweaver MX

When you use Dreamweaver to insert a form element, image, or table, it will prompt you for the appropriate accessibility attribute:

Dreamweaver Accessibility Attribute Dialog Box

Top

Images

Provide ALT tags 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 "alt" tag. The purpose of the "alt" tag is to provide a description of the contents of the image for those users who cannot see the image. All images must have an "alt" tag in order for the page to pass Section 508 requirements.

However, not all images convey content relevant information. For example, many of our Web sites contain images along the right-hand column of the page (as at the top of this page) that are there to communicate a visual impression of the department or the campus, but these images do not contain any information that is vital to understanding the content on the page. In addition, 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 an "alt" tag.

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

  • All images MUST have an "alt" tag
  • For images that are decorative or that do not contain relevant information, use an empty "alt" tag ( alt="")
  • For images that communicate important content, provide a description of the content of the image
    • Example: alt="Photograph of President Zingg accepting the Nobel Peace Prize"
    • alt="Photo" or alt="Image" are NOT descriptive of the content of the image

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.

Top

Tables

Tables and forms can be particularly problematic for disabled users. By including accessibility elements in tables, we can make using them a bit less confusing.

Table Headings

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

Make Model Megapixels Price
Canon EOS 300D 6.3 $899
Nikon D70 6.0 $999
Minolta DiMAGE A1 5.0 $699
Sony F828 8.0 $999

The code looks as follows for the first row in the table:

<tr>
  <th scope="col">Make</th>
  <th scope="col">Model</th>
  <th scope="col">Megapixels</th>
  <th scope="col">Price</th>
</tr>

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

Make
 Canon Nikon Minolta Sony
Model
 EOS 300D D70 DiMAGE A1 F828
Megapixels
 6.3 6.0 5.0 8.0
Price
 $899 $999 $699 $999

The code looks as follows for the first row in the table:

<tr>
  <th scope="row">Model</th>
  <td>EOS 300D</td>
  <td>D70</td>
  <td>DiMAGE A1</td>
  <td>F828</td>
</tr>

Captions (optional)

Tables can also be captioned to help disabled users understand the purpose of the table. This is an optional element.

Digital Camera Comparison
Make Model Megapixels Price
Canon EOS 300D 6.3 $899
Nikon D70 6.0 $999
Minolta DiMAGE A1 5.0 $699
Sony F828 8.0 $999

<table width="400" border="0" cellpadding="0" cellspacing="0">
  <caption> <!-- if you want to set an alignment to the caption (i.e. align it under the table or above the table) then you must specify this in the stylesheet -->
   Digital Camera Comparison
  </caption>
  <tr>
    ...

Top

Forms

There are several things that can be done to make forms more accessible for disabled users. Most are fairly simple. The following examples should be used whenever possible.

Labels

The most common technique for making forms more accessible is using label tags to identify each form element (text box, check box, radio button, etc.). Labels can appear before or after the form element. It is recommended to attach label using the "for" element, since it allows more flexibility in the placement of the label.

<label for="FieldID">Text Box Label</label>
<input type="text" name="textfield" tabindex="1" id="FieldID" />
<!-- note that the "for" is linked to the field id-->

Labels can be used for all form elements: checkboxes, radio buttons, select lists, and buttons (though labels are not required for buttons).

<input type="checkbox" name="checkthis" value="checkbox" tabindex="2" id="checkbox2" />
<label for="checkbox2">Check box item</label>
<!-- note that placing the label tag after the form element displays the tag after the element-->

Top

Tab Index

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 you wish.

Click in the First Name field, below, and press the tab key to see how the tab index works.

Tab Index Example
 

<label for="label4">Address</label>
<input name="address" type="text" id="label4" tabindex="3" size="35" />

Top

Skipping Navigation

Section 508 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. The template pages will include this functionality automatically.

To implement "Skip to Content" manually:

  1. Add the following at the top of the page:
    <div id="skip"><a href="#content" title="Skip to Content"><img src="/images/dot.gif" alt="Skip to Content" width="1" height="1"></a></div><!--skip-->
    Use the file reference "/images/dot.gif" as long as the page you are creating resides on the main CSU, Chico web server.
  2. Once you have the link at the top of the page, you will also need to add the following at the beginning of the content area (typically right before the top level heading on the page):
    <a name="content" id="content"></a>

Top

Dealing With Long Pages

Long pages like this page (a "long" page can be defined as greater than two screens high) are the bane of all users - not just disabled users. Computer monitors are not comfortable reading environments. Eyes fatigue from reading low resolution text with the body in a less than optimal position. In addition, most people use the Internet to find specific information, not to settle in for a nice long read. In addition, a user scanning a page for information can't see what's below the bottom of the monitor, and if there is no hint that useful information lurks there, they may never look.

Taken together, all these things make long pages a real challenge for users. Now add in the fact that the screen reading software used by disabled users has no way to "scan" or "skim" pages for relevant headings or specific words - but must instead read the entire page word by word from top to bottom - and long pages become an excruciating endurance test.

However, making them a bit less daunting and much more usable for both disabled and non-disabled users is relatively easy.

Visually and Logically "Chunk" Pages

Breaking up the content of a page makes it more readable and less visually intimidating than a huge unbroken block of text. Organizing the content into logical chunks is not only a better way to present content, it also makes it easier to locate information. Follow these tips to make long pages easier to digest.

Visually and logically "chunk" long pages to break them into digestible sections for users. Use paragraph breaks and headings to visually break up the page for sighted users. Such visually distinct headings will attract attention and make the page more scannable. Use the same headings to create a logical organization and segmentation of the page.

Create In-Page Navigation

Assuming you've provided a Skip to Content link, users - disabled or not - will first encounter the content at the top of the page. If it is a long page, there is no way for users to know all of the content on the page. If you've followed the steps above, determined site users will be able to scroll down the page, scanning the headings for something to catch their interest. Most users won't scroll at all if they don't get a hint that something useful is to be found on the page. It's even worse for disabled users who might have to listen to every word on the page in order to know if what they're seeking is on the page.

Alleviate these problems by creating a hierarchical menu at the top of long pages that link to the headings and subheadings that you created on the page. This menu will act as the page's "table of contents," allowing users to see an outline of the page before reading it.

Use HTML anchors at each heading and link the in-page navigation menu items to these anchors.

Keep in mind a few things about anchors:

  • Anchor's names should be words so that both disabled and non-disabled users can understand what the link is
    • "#longpages" has more meaning to users than "#5" or" #lp"
  • Anchor names must be one word (no spaces or underscores) in order to validate
  • Anchor names should be all lowercase
    • Right: "toplinks"
    • Wrong: "topLinks"

Provide "Back to Top" Links

On long pages with multiple headings, links to the top of the page should be placed periodically on the page. The standard link text will be "Back to Top" and link to an empty anchor. The empty anchor automatically jumps to the top of the page.

Typically, these links will be placed at the end of each main topic section (typically, these are the <h2> level tags). However, some judgment should be used. There is no reason to place "Back to Top" links after every section if the sections are very short. On long pages, there should always be a Back to Top link placed at the bottom of the page.

Use the following guidelines in placing "Back to Top" links:

  • Links will only appear at the end of main topic sections (<h2>)
  • Subsections (h3, h4, etc.) will not have Back to Top links
  • Links will be placed at the end of the sections
  • Links should be spaced out to appear no more often that about every screen and a half (given a 1024x768 monitor)
  • Short sections do not require Back to Top links
  • Short pages do not require Back to Top links
  • Long pages (over two screens tall) should have a Back to Top link at the end

Here is an example of the Back to Top link:

<a href="#">Back to Top</a>

Most browsers accept "#" as a valid link to the top of a page. Screen Readers react to the "#" link correctly.

Top