FrontPage 2000 and Section 508, Mary Suski, Web Design in Grand Blanc, MI

Resources

Universal Design
and Accessibility

Overview

Links

FrontPage 2000
Training Class Handouts

FrontPage 101

Themes

General Tips

Graphics Tips

Virtual 360° Tour

Section 508

JavaScript
Eye Candy

NetStudio

FrontPage 2000 Training Class Handouts

This handout was created for a Grand Blanc Community Schools FrontPage 2000 class to train teachers how to develop classroom websites.

Section 508

This is an introductory overview on how to use FrontPage 2000 to bring web pages closer to Section 508 compliance. The term, Section 508, is used to refer to the part of the Workforce Rehabilitation Act that requires Federal websites to meet specific accessibility guidelines for people with disabilities. Section 508 does not address all aspects of website accessibility. To learn more about the general topic of accessibility, please visit my Universal Design and Accessibility Overview Page.

Paragraphs of the law are quoted, followed by tips and techniques using FrontPage 2000. As this is meant to be a synopsis, using these procedures alone will not guarantee that you have an accessible page. Also, these techniques are not the only way to achieve compliance. Last, but not least, adaptive technologies are changing rapidly, and guidelines will need to be adjusted for relevancy. Visit the links listed in the Bibliography to learn more about this subject.

Text Tags
Multimedia Presentations
Color
Readability
Server-Side Image Maps
Client-Side Image Maps
Data Tables
Frames
Flicker Rate
Text-Only Alternative
Scripts
Applets and Plug-Ins
Electronic Forms
Navigation Links
Time Delays
Test Your Page With Bobby
Bibliography

"A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content)."

A non-text element is an image, graphic, audio clip, or other feature that conveys meaning through a picture or sound. Examples include buttons, check boxes, pictures and embedded or streaming audio or video.

This is easily accomplished with graphics in FrontPage 2000 by right clicking on the graphic, choosing Picture Properties. Go to Alternative Representations - Text and type in a short description of the graphic or the purpose of the graphic. For example, if an arrow is used to indicate how to go to the top of a page, the alternate text for the arrow could be "go to top of page". This is usually referred to as adding "alt text".

Images that do not convey any content, such as decorations or blank spacer images, need to have the alternative text specified as alt="". Right click on the image, go to HTML View, and add alt="" in the tag that begins with <image ...

For detailed information on adding text equivalents to other non-text elements, go to http://www.access-board.gov/sec508/
guide/1194.22.htm#(a).

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

Synchronized captioning is needed for multimedia presentations such as videos and webcasts. Specialized software is necessary to create accessible multimedia productions. FrontPage 2000 cannot create these types of presentations. An audio-only presentation, by the way, is considered a non-text element and can be made accessible with a transcript.

Additional information on this requirement is located at http://www.access-board.gov/sec508/
guide/1194.22htm#(b).

"Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup."

A web page should be usable without color. See http://www.access-board.gov/sec508/
guide/1194.htm#(c) for more on this.

Top of Page

"Documents shall be organized so they are readable without requiring an associated style sheet."

Using cascading style sheets is a great way to improve accessibility by separating a web page's content from the way it is presented on a monitor. When style rules are used, however, it's best to create a separate style sheet file and link it to the web page in HTML View between the <head> and </head> tags. For example, if you look at the source of this page, you'll see <link rel="stylesheet" type="text/css" href="../swdstyle2.css"> just above the </head> tag.

At this time, different web browsers have different levels of support for cascading style sheets. To satisfy this accessibility requirement, test the page by temporarily removing the link to the style sheet file, then make sure the page is still usable. Visit http://www.access-board.gov/sec508/
guide/1194.htm#(d) for more.

"Redundant text links shall be provided for each active region of a server-side image map."

FrontPage 2000 is generally not used for making server-side image maps. Redundant links are accomplished by listing the links in the image map again elsewhere on the web page using text.

"Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape."

When you create a client-side image map in FrontPage 2000, just add alternate text to each map "area" to help with accessibility. Go to HTML View to do this. Here is an excerpt of code from an image map from the Children's Garden site:

Note the alt="News". This is the alternative text (alt) that was added to FrontPage's coding of the image map. Remember that the main image, just like all images, needs alt text as described above. Visit http://www.access-board.gov/sec508/
guide/1194.htm#(e).

Top of Page

"Row and column headers shall be identified for data tables. Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers."

Tables used to present data, as opposed to tables used for layout, need special markup to function well with assistive browsers. The first thing to do is locate the table tag in the FrontPage HTML View and add summary="your description of the table layout here".

Go back to Normal View and select the table cell you want to make a header. Right click on the cell and select Cell Properties. Check the Header Cell box. Go to HTML View to associate data cells and header cells. A simple table can use the scope attribute. In the table below, the headings are over the columns. The markup for this example is scope="col".

Total Page File Size in Kilobytes	Seconds for Page to Download at 28.8
40	11
80	22

<table align="center" summary="the first column lists file size and the second column lists download time in seconds" cellspacing="1" cellpadding="5" width="300">
<tr>
<th scope="col" class="small" width="50%" valign="top" align="center">Total
Page File Size<br>in Kilobytes</th>

<th scope="col" class="small" width="50%" valign="top" align="center">Seconds
for Page to<br>Download at 28.8</th>
</tr>

<tr>
<td class="small" width="50%" valign="top" align="center">40</td>
<td class="small" width="50%" valign="top" align="center">11</td>
</tr>
<tr>
<td class="small" width="50%" valign="top" align="center">80</td>
<td class="small" width="50%" valign="top" align="center">22</td>
</tr>
</table>

Visit http://www.w3.org/TR/WCAG10-HTML-TECHS/
#identifying-table-rows-columns and http://www.access-board.gov/sec508/
guide/1194.22.htm#(g) for more accessible table techniques.

Top of Page

"Frames shall be titled with text that facilitates frame identification and navigation."

Although you can create web pages that use frames in FrontPage 2000, titling the frame has to be done in the HTML View. See Checkpoint 12.1 at http://www.w3.org/TR/WCAG10-HTML-TECHS/
#frames for information on how to do this.

"Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz."

Nothing on the screen should flash between 2 and 55 times per second.

Fast moving graphics, especially those that flash at "strobe light" speed, not only distract from the content on the page, but are also an accessibility concern. People with attention-deficit/hyperactivity disorder, dyslexia or photo epilepsy can be negatively affected by this type of activity on a web page. More is available at http://www.access-board.gov/sec508/
guide/1194.22.htm#(j).

"A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of these standards, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes."

Any pages that cannot meet Section 508 requirements need to have a separate web page, all in text, that provides users with the same information.

Create the text-only page in FrontPage, and provide a link to it on inaccessible pages. The important thing is that the text pages be updated and this technique is used as a last resort.

Top of Page

"When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology."

JavaScript is best used as "eye candy", whereas server-side scripts are best for presenting information. When JavaScript is used for important functionality, it is usually inaccessible and a text version may be necessary. To see what a web page looks like without JavaScript support, follow these directions:

In Internet Explorer (version 5 or higher), go to Tools, then Internet Options, Security, click on Internet. Select Custom Level, go to scripting section and check Disable Active Scripting.
In Netscape Navigator, go to Edit, select Preferences, click on Advanced and uncheck Enable JavaScript

Another test is to navigate the web page by just using your keyboard.

As with cascading style sheets, is it best to link a JavaScript to a web page through an external file. The Parents as Teachers home page uses JavaScript that has been marked up for improved accessibility. Here are a few examples:

This is the external JavaScript link located within the <head> and </head> tags.
<script src="hpmouseovers.js" type="text/javascript" language="javascript"></script>
The noscript tag is used to provide information that will be displayed if the user's browser does not support JavaScript. In this case, it is placed in the table cell that contains the picture that changes per the JavaScript.

<noscript>In browsers which support JavaScript, different photos of parents and children are displayed when navigation links are moused over.</noscript>
<img border="0" width="216" height="144" src="../PAT/images/girlwithbabysm.jpg" name='picture' alt="photos of parents and children">
When adding JavaScript, test it by trying to navigate the site with just your keyboard. In this example, the function doButtons is called by onfocus to work with a keyboard and with onmouseover to work with a mouse.

<a href="../PAT/overview/welcome.htm" onfocus="doButtons('overview')" onmouseover="doButtons('overview')">
Overview</a>

These are just a few tips for making JavaScript more accessible. For more information on making JavaScripts and other types of scripts accessible, visit http://www.access-board.gov/sec508/
guide/1194.22.htm#(l) and http://www.w3.org/TR/WCAG10-HTML-TECHS/
#scripts.

Top of Page

"When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l)."

The idea is to offer a way for visitors to get a special applet, plug-in or program needed to use a web page. This can be done by just adding a link to a page in which the plug-in, for example, can be downloaded.

The plug-in or applet itself needs to comply with the other guidelines mentioned above. For example, when Adobe Acrobat files are placed on a web page, assistive technologies treat the Adobe pdf file as one big graphic. Therefore, it is not accessible to begin with, and needs a separate text version. (Adobe is working on this for future releases.)

For more, go to http://www.access-board.gov/sec508/
guide/1194.22.htm#(m).

"When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues."

There is an excellent step-by-step article on how to accomplish this with FrontPage located at http://www.webaim.org/howto/frontpage. More information is also available at http://www.access-board.gov/sec508/
guide/1194.22.htm#(n).

Top of Page

"A method shall be provided that permits users to skip repetitive navigation links."

This is truly helpful to people using assistive technologies. It can be accomplished through text and image links.

An easy way to pass this requirement is create a FrontPage bookmark at the beginning of the page's actual content. On the menu bar, click on Insert and select Bookmark. Give the bookmark a name such as content and click OK. At the top of the page add the words Go to Content or Skip Navigation. Hyperlink that copy to the bookmark.

Another way to meet this requirement is to do a similar technique with a small, transparent graphic. The graphic, instead of the words, "Go to Content", links to the content bookmark. If the graphic is so small that it's hard to click on, go to the HTML View to add alt="Go to Content" to the image source tag. Although the graphic may be invisible to sighted users, people using speech readers hear whatever is included in in the alt attribute.

More at http://www.access-board.gov/sec508/
guide/1194.22.htm#(o).

"When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required."

If a web page or any of its elements expire after a set amount of time, it can be inaccessible to people with certain disabilities. This is done with scripts, and the script's programmer needs to build in ways to accommodate this requirement. Or, an alternative, accessible format needs to be provided. Visit http://www.access-board.gov/sec508/
guide/1194.22.htm#(p) for more.

Test Your Page With Bobby

The Watchfire Corporation offers a free online testing tool called Bobby. Just type in the URL of the web page you want to test. Choose the U.S. Section 508 Guidelines and submit. You will receive a report that begins with a copy of the page you submitted. Watch out for Bobby hats!

Bibliography

The Access Board - a Federal Agency Committed to Accessible Design
http://www.access-board.gov/sec508/
guide/1194.22.htm

Web Accessibility In Mind
http://www.webaim.org/howto/frontpage

Top of Page

	- Home - Services - Portfolio - Resources - About - Contact Resources