Section 508 Workshop

Section 508 Workshop
Guideline Details

(A) Non-Text Elements
(F) Client-Side Image Maps
(G) & (H) Data Tables

(N) Electronic Forms
(O) Navigation Links

To add alternative text using FrontPage 2002:
1. Right-click on the image and select "Picture Properties..."

2. Select the "General" tab and type the alternative text in the "Text" text box.

Guideline F: Client-Side Image Maps - Top

To add alternative text to a hotspot in FrontPage 2002:
1. Right-Click on the hotspot and select "Picture Hotspot Properties..."

2. Click the "Screen Tip..." button.

3. Type some meaningful alternative text in the text box provided.

Guideline G & H: Data Tables - Top

FrontPage 2002 does not have the necessary facilities available from within the program to make your HTML data tables Section 508 compliant. Therefore, the only alternative is to delve into the HTML in order to correct the code.

To begin with, let's look at the different HTML tags of a table.

TAG	DESCRIPTION
<table>	The start of a table. Every table must have one and only one of these tags. This tag must be closed.
<tr>	The start of a row in a table. A table may have an unlimited number of these tags but only one per row. This tag must be closed.
<td>	The start of a cell in a row. A row will most likely have more than one of these tags. This tag must be closed.

A closing tag will be in the form of the opening tag but with a forward slash in front of the tag identifier. For example, the <table> tag's closing tag would be </table>

So a simple HTML table that looks like this on the web page;

Cell A	Cell B	Cell C
Cell D	Cell E	Cell F

would look similar to this in the HTML code:

The source code of this example is very clean because I have not included much of the formatting code because I wanted to draw attention to the HTML structure. Also, I have indented the code in such a way as to make it fairly obvious where the cells in the table are. FrontPage and other HTML editors do NOT necessarily format HTML tables in this format. Therefore, it is imperative that you understand the three main table tags so that you can search through the HTML code to find these. Typically you could use the "Find" option inside FrontPage to have FrontPage search through the HTML code and find the cell contents that you are looking for. This is by far the easiest way to locate the HTML code that you will need to edit. For example, using the HTML table above, if we wanted to find cell 'B', we could search for the text "Cell B" and the editor should highlight out that exact phrase and move our insertion point directly into the cell we are looking for. Then, the cell tag that we need to modify should be immediately to the left of the selection.

How to make a simple HTML table 508 compliant.
Now that we know how to find the cell tag(s), let's take a look at what we need to do to make the tag 508 compliant.

If the HTML table is a simple data table, then all we need to do is to include the proper "scope" attribute in each of the appropriate cell tags. For example, using the HTML table above, if cells A, B and C were headers, then we would need to include the scope="col" attribute in those cell tags. In doing so, the HTML of that first row would change to the following:

This would identify cells A, B and C as being headers for all of the following cells in their respective column.

Likewise, if cells A and D were headers, then we would need to include the scope="row" attribute in those cell tags. In doing so, the HTML of the table would change to the following:

Guideline N: Electronic Forms - Top

To add a label to web form objects in FrontPage:
1. Highlight the label text and the form object together

2. Click Insert, Form, Label

Guideline O: Navigation Links - Top

In order to setup a method to bypass navigation links on a page, you must do two things. First, you must indicate a location on your page where the actual content begins. Second, you must create a hyperlink, before the redundant navigation bar, that links to the location from the first step.

In order to indicate a location on a page, you will need to insert an HTML anchor or Bookmark as FrontPage refers to them as.

To insert an anchor in FrontPage 2002:
1. Move the insertion point to the location on the page that you want to insert the anchor.

2. Click Insert, Bookmark

3. Enter a unique name for the Bookmark in the space provided

To insert a link to an anchor in FrontPage 2002:
1. Enter some meaningful text for the hyperlink at a point before the redundant navigation bar. For example, "Skip Navigation Bar"

2. Select the text and Insert a Hyperlink

3. Click the "Bookmark..." button and select the bookmark that you had created previously.

<- Back