Best Practices

Use ALT text on images

This is perhaps the easiest best practice to do, but one of the more difficult to do well. Essentially, anytime you have an image, it must have an ALT value. This text should replace the image, not describe it.

In code:
<img src="path/to/image.jpg" alt="my cat fluffy" />

In the case of decorative images, there still has to be an ALT attribute, but it should be null.

In code:
<img src="path/to/bullet_image.gif" alt="" />

An image must always have an alt value, even if it is null. If you're working with Dreamweaver, you can ensure this by going to the application preferences, going to the Accessibility tab, and checking "Images". If this box is checked, anytime an image is added to a page, the author will be reminded to supply ALT text or set it to empty (using a toggle to the right of the text box).

Writing good alt text is sometimes challenging, so here are a few guidelines. First, keep the alt text short but descriptive.

Use Headings to Structure the Page

One of the best ways to make a page more accessible (and usable) is to use headings to organize the page. The Sacramento State template uses them to section different parts of the page and divide menus on the left. Information providers are strongly encouraged to use headings to section their pages instead of large/bolded text. Headings should never be used for presentation, but to give an "outline" of the content on the page.

Some rules for using headings:

  • Keep them short
  • There should be only one Heading 1 on the page, and it should function as the title of the page
  • Properly nest headings. Just as an outline doesn't skip from the top level to fourth level without intervening second and third levels, don't go from a Heading 1 directly to a Heading 4.
  • Don't use headings to get a particular visual effect

Use Lists Where Appropriate

This page uses a lot of lists. On the left, the menus are lists. At the top, the global navigation beginning with "sac state home" is a list. The table of contents that jumps to a different part of the page is a list. Lists are frequently used, but rarely marked up correctly. Instead, many writers will use an image as a bullet, then hit enter to create a new paragraph. Instead, use one of the list types to make sure the content is represented correctly.

The two types of lists are ordered and unordered. Unordered lists are great for menus (after all, a menu is just a list of choices) and tips, while ordered lists can be used for outlines or instructions. One of the benefits of using the ordered list for instructions is that authors don't need to type numbers for steps - the page will automatically number each item.

Correctly using lists will make your site more accessible, but will also make it much easier for all users to scan the page and get the strong points, just like using headings. And if you do use a list, consider using a heading immediately before it.

Make Links Unambiguous

Everyone is familiar with the ubiquitous "click here" links all over the web. What many people don't know is that these types of links are inaccessible because they don't tell people where they will go. Sometimes fixing this requires some sentence reconstruction, but it is almost always doable. All it requires from information providers is a careful placement of the link tags, and linking the right stretch of text to the page.

Give Extra Information to tables

Table accessibility can be very difficult or very simple, but here are a few tips for making sure data tables are accessible.

These techniques should be avoided for layout tables

Provide a caption

Every table should have a caption that describes, in broad terms, what the table is presenting. It doesn't have to list all of the headers, but does act as a "title" of the table.

In HTML, the <caption> tag immediately follows the <table> tag. Example:

<caption>Population of U.S. states</caption>

If you're using Dreamweaver, you might have to add the caption using Code View if the table already exists. However, if you're adding a new table, Dreamweaver will ask you to provide a caption (and summary) if you've set it to in the Preferences Accessibility tab. Once a table has a caption, it can be edited directly in Design View.

Provide a summary

If the caption is the title of a table, the summary is an in-depth description of it. Summaries are used to explain any trends in the table data and explain what the table means. The summary is not as important as the caption, but is still useful for accessibility.

Use table headers

In the table below, headers are used for the columns and names (in each row). The table has a class of "csustable", which can be applied to any table in a page that uses the Sacramento State template.

Employees training for marathon
Name Miles Walked Miles Ran Favorite Snack
Bertha 9 0 Banana
Cathy 18 3 Celery
Danny 15 3 Potatoes
Ernie 34 15 Oranges

In HTML, making a cell a header is accomplished by changing the <td> tag to a <th> and adding a scope attribute; if the header is for a column, it would be <th scope="col"> and for a row <th scope="row">.

In Dreamweaver Design View, any cell can be turned into a header by clicking in the cell and checking the "Header" box in the cell properties pane.