Walkthrough of Compliance Testing using the A-Prompt Tool

Below is a copy of what the original design for this site's homepage looks like. There are several problems with the design that A-Prompt will diagnose and give you the chance to fix as it finds them. This page was originally designed in Dreamweaver. When performing fixes, many of these problems will require some individual thought, and will be difficult to automate. If you are using a tool like Dreamweaver, there are some steps, such as adding "alt" or "title" tags to images or links that are frequently repeated, that can be automated. However, adding headers to each table column, changing colors for text and backgrounds, or other tasks will require manual effort and thought.

This is only one validation of a single page, and should not be taken as a comprehensive or definitive explanation of the process. Your actual results will vary depending on the size and complexity of your pages. This page, being rather brief and not complex, took less than 5 minutes to diagnose and repair. If you have complex tables, embedded multimedia files or animations like Flash, Shockwave or .wav or .avi files, your level of effort will be greater.

IMPORTANT NOTE: Please read the meeting notes from the Federal Web Business Council Meeting held on 04/11/2001, as it has important comments about testing.
Meeting Notes

Page Organization

This page is divided up into three sections:

Tips on compliance
sample walkthrough of an A-Prompt validation
specific detail on validating tables

Things to look for when modifying a page to make it 508 Compliant:

new and visited links should be different and possibly the conventional ones
no BLINK, MARQUEE, SPACER elements should be used
frames should be used with caution. Make sure to keep your frame structure as simple as possible, and to name your frames in logical, descriptive titles so that navigation for the non-seeing is not difficult.
NOFRAMES should accompany frames and be meaningful
IFRAME is not portable, so far
browser-compatible specification of frame borders should be used
page downloading should not exceed 20 secs on medium speed internet connections
images should not be embedded within links labels
the page should contain a description and a set of keywords
the page title should be short and meaningful
email addresses should be explicit
external links contained in the page should be valid
when writing hyperlinks or data input fields, make sure that they have titles, are tab ordered in the proper order necessary for navigating the page, and that the titles are meaningful.
the page should not contain invisible elements
compliance with the HTML 4.0 standard
use structural tags instead of visual tags to impart meaning or emphasis (ie <strong> or <em> instead of <b> or <i>)
avoid using headers (<h1></h1>) as a formatting tool just for layout purposes. A header should indicate the start of a section of related information, and should be used in proper sequential order (ie there should not be an <h3> tag on a page if there is not an <h2> preceeding it)
when creating tables, provide summaries, use table headers to identify columns and tag data in rows so that it can be associated with the appropriate column header when it is read linearly
use language description in the <HTML> tag of a page to indicate what the native language the page is written in.
add as many keywords as possible to the META tag of a page to make it easier to find with a search engine.
when placing images on a page, make sure the image has an ALT or LONGDESC tag that is both brief and meaningful.
whenever possible, avoid using images as anchors for hyperlinks without providing associated text in the same link.
use skipover links to enable users to navigate past large blocks of text or links that may not interest them.
avoid using animations to convey meaning
provide transcripts of audio files
avoid video files to convey meaning not only because they present difficulties for the seeing impaired, but they also load down your page
if you use Cascading Style Sheets, (CSS for short), test your page without them to make sure that it is equally understandable. Your content should not be unavailable to someone not using the latest browsers and it meaning should not be conveyed strictly by appearance
make sure you use commonly available colors, fonts and font sizes in your page so that it can be easily read. There should be reasonable contrast and fonts and images should not be microscopic.
dynamic content should, when possible, be interpretable by assistive technologies, and not just the static content of a page.
exercise caution when developing scripts, applets, etc for your page. Make sure that the output of those scripts, applets etc is delivered to the client in an accessible format, and that its functionality is not purely for visual effect. If, for example, you are using javascript to create drop-down menus for navigation, provide an alternative navigation bar that displays the same links in a static layout.

A-Prompt Walkthrough

The A-Prompt tool enables you to perform your fixes as it tests, so you can make corrections such as changing text and background colors, fonts, etc., down to modifying tables to add descriptive table headers. In order to do this, you will need to have an at least minimal working knowledge of HTML.

Original page design

full-screen version of this image
to view the source code for the original page, click on the link here and then right-click in the new window and select "View Source", if you are using Internet Explorer. If you are using Netscape, right click on the link and select "Open in composer".

When you launch A-Prompt, you get the following dialog, asking you to find the local copy of your HTML file to validate:

A-Prompt File Selection Dialog

Select a file to validate. In this case, we are validating the file "indexcopy.html". The screen below represents the initial validation result.

Validation initial results

The first problem indicated is Contrast- pages need to have good contrast to meet the needs of people who use mechanical readers to assist them.

Step One: Background/Text Contrast problems

When the colors have been corrected, A-Prompt indicates the acceptability of the corrections.

Step One: Background/Text Contrast corrections

The next issue: use of headers for layout/typography instead of conveying meaning... Headers should be used only to indicate section breaks and provide emphasis to text because the text is a section title, not just because you want bold text of some size.

Step Two: Possible inappropriate use of headers

When the header is purely a stylistic convention, change it to a text formatting command instead. This is one instance where your judgement is necessary.

Step Two: changing header to text formatting

Link Text meaning: In this case, A-Prompt has determined that the link text is verbose and possibly hard to understand. This is another instance where your judgement is necessary.

Step Three: Link wording

A-Prompt gives you the opportunity to amend your link text. Review it at this time and decide if a change is needed.

Step Three: review link text

Manual checks: this is the opportunity to validate some basic information about your style and layout that is not explicitly testable.

Step Four: manual checks

You need to verify yourself that you do not use stylesheets, colors are not used to convey information, and that any changes in the written/spoken language used on the page are marked (ie from English to French)

Step Four: Types of manual checks

The final test for this page is the links skipover test. You may need to put a skipover link on the page if you have a long list of hyperlinks that are not necessary to navigate through in order to read the page.

Links Skipover test

Congratulations! You have now verified your page as compliant!

Congratulations! Your page is now 508 Compliant

Testing Tables

Since tables are such an important design element not only from a layout as well as data perspective, they merit a separate discussion from the regular testing process. Using a different version of the page we debugged above, with tables added, we can see the various table compliance issues. Table validation: First, A-Prompt will determine the nature of each table on the page. Different validation standards are applied to data and layout tables

Table type determination- layout table

Here is a list of the problems with both the data and layout tables.

Data and Layout table errors

Here a different set of questions and checks are presented for the data table, as compared to the layout table seen in the previous screen. Here, A-Prompt is checking for headers on the columns of the table.

Data table header request

Here, A-Prompt is checking for data markup tags on the cells of the table.

Data table cell markup request

Does the table linearize? Tables may be converted and read in a linear fashion by an assistive browser.

Layout table linearization

These are all typical issues encountered with tables. Pay special attention to what is necessary to render your tables readable by assistive browsers. Tables may be the seeing designer's best friend, but can be a serious impediment to understanding the content of a page for a differently-abled user who must rely on a machine to interpret your design.

Return to AFPCA 508 Compliance Homepage Return to Legal Issues page Return to Bobby demo page