Section 508 Common Considerations

This report is intended as a quick reference for website owners and managers who perform “light”
website maintenance who need to maintain Section 508 requirements. This summary is aimed at
those who primarily use a graphical web editing tool, such as Dreamweaver, and leave more
complex website maintenance involving CSS and Javascript to professional web developers.

The primary source of information in this document came from http://www.section508.gov

Images

It’s simple: each image (IMG) tag must have an ALT attribute. What’s not so simple is deciding what
to put in the ALT attribute.

The intention here is to describe the image or its purpose to a visitor who cannot see it. When
deciding on ALT descriptions, think about the purpose of the image in the context of the webpage: is
it a decoration, a logo, for site navigation, visual aid? The answer to this question will help you
determine the appropriate description.

HTML example:

<img src=”/manwithdog.png” alt=”A with his dog sit beside a lake” />

Here are some simple examples of ALT descriptions:

Examples from Section508.gov

If any of the above images were being used as links, the action or function would take precedence.
In the third example above, for instance, instead of “A blue oval with an image of the White House”
it a better description would be “Visit the White House website”.
Banner images are often created by combining some text with images to a grab a visitor’s attention.
If this is the case simply duplicating the text on the banner for the ALT description would be more
appropriate than trying to describe the image itself.

ALT description for logos should include the name of the organization the logo belongs to.

Editing ALT description in Dreamweaver code editor

Images used for webpage layout, like spacers or backgrounds, should have a blank space for an ALT
description:

<img src="spacer.gif" alt=" ">

This essentially tells a screen reader to ignore the image.

Navigation Images, or buttons, should describe the destination or the function of the button.
Because screen readers can identify hyperlinks, it’s probably redundant to have “link to…” as part of
a navigation image ALT description.

ALT descriptions should be less than 80 characters. If more space is needed you need to use the
LONGDESC attribute of the IMG tag. The LONGDESC attribute is intended to provide a link to a
dedicated webpage to describe the image. A graphical report or chart image is a good example of
when you might need to use the LONGDESC attribute.

Attached to this report is an excerpt from Dreamweaver help on how to configure it to show
accessibility dialog boxes for ALT descriptions when inserting images and media into webpages.
Links

There is no need for NAME descriptions on anchor tags, the anchor text may serve as a description
of where the hyperlink takes the visitor. Screen readers can identify links and allow the user to view
a list of all links on a web page. For this reason, write links using text that makes sense when read
out of context. Example:

To visit the Section 508 home page Click here

This doesn’t tell the visitor where the link goes if the link is viewed separately from the page content
or read out loud in a screen reader.

Visit the Section 508 home page

This convention provides useful information about the link’s purpose and destination regardless of
its context.

Alt Text for images that are hyperlinks

If the image is used as a hyperlink, describe the destination or purpose of the link instead of the
image, or do both if possible.

Sample code:

<a href="home.htm">
<img src="acme-logo.gif" alt="ACME logo and link to the home page">
</a>

Image Maps

Image maps should be place right after the image the map is intended for. The IMG tag should
mention is it a map, and the corresponding AREA tags should have title or alt tags for the action of
the area.

Sample code:

<img alt="Image map with links to Map" src="../images/imagemap.gif"

usemap="#Map" border="0">
<map name="Map">
<area shape="rect" coords="6,2,64,30" href="JavaScript:alert('Home Hotspot
Example')" title="Home">
</map>

It is probably easier to use individual image files with anchor tags instead of image maps.
Multimedia

To make multimedia accessible to all users, guideline (b) of the Access Board standards states:

"Equivalent alternatives for any multimedia presentation shall be synchronized with the
presentation."

The word "synchronized" is key. It is possible to create a separate file with the text of the contents
of an audio file or a detailed description of a video or animation. However, to comply with section
508, you must synchronize a multimedia file with a text equivalent.

In other words, voice portions of video must be captioned to comply with section 508. (It is
interpreted by most that a posted transcript for audio only content will satisfy this requirement,
since captioning an audio recording would be absurd.)

If you have uncaptioned video on your website you have three choices to comply with section 508:

 Add captioning to each video. This might be possible using software depending on the video
format.
 Reproduce new video with captioning.
 Remove uncaptioned video from the site.

Of course, OBJECT and EMBED tags must have proper TITLE and ALT descriptions.

There are more details regarding multimedia and section 508 requirements, please consult an
expert or visit http://www.section508.gov

Forms

Forms should be grouped by the FIELDSET tag to group logical fields together, such as grouping
home address fields together in one fieldset and putting payment information in another fieldset.

Use the LABEL tag to identify text labels for input boxes. Place labels before its corresponding input
box, either above or to the left. Never place the label under the input. Use the LABEL attribute
“for” to create a relationship to the INPUT tag’s “id” attribute.

Sample code:
<form name="login1" action="url" method="post">

<fieldset>

<legend><b>Personal Information</b> </legend>

<label for="firstname">First Name:</label>
<input id="firstname" type="text" maxlength="60" name="firstname">
<label for="lastname">Last Name:</label>
<input id="lastname" type="text" maxlength="60" name="lastname">
<label for="address">Street Address:</label>
<input id="address" type="text" maxlength="200" name="address">
<label for="city">City:</label>
<input id="city" type="text" maxlength="100" name="city">
<label for="state">State:</label>
<input id="state" type="text" maxlength="2" name="state">
<label for="zipcode">ZIP:</label>
<input id="zipcode" type="text" maxlength="5" name="zipcode">

</fieldset>

<input type=”submit” value=”Send Registration”>

</form>

Aviod drop down menus or prefilled text as these may interfere with screen readers, or confuse the
visitor when read out loud. If you must use a drop down list, use the OPTGROUP tag to organize
large lists.

Of course, the TABINDEX tag can be used to assign tab order if necessary.

A general rule of thumb for accessibility and visitor friendliness in general, is to only ask the visitor
to provide information that is absolutely necessary. If you only need an email address don’t ask for
a name too unless it is critical that you collect it.
Tables

Tables should only be used for what they were intended for, displaying tabular data, or information
in a spreadsheet format.

Column and row headers should be labeled appropriately. The easiest way to accomplish this is by
using the SCOPE attribute in table cells that serve as headers:

Section508.gov

Avoid nested tables when possible, screen readers may have a tough time with multiple levels of
nesting. Plus it is just bad practice!

More Information

These are a few of the most common section 508 considerations for most webmasters. Complex
website topics such as CSS and Javascript were intentionally not included in this summary. For
complete section 508 information please visit http://www.section508.gov

Attached to this report is an excerpt from Dreamweaver help on how to configure it to show
accessibility dialog boxes for ALT descriptions when inserting images and media into webpages.

Written 2009 by Tom Litchfield of TechieDIY.com