Introduction and background

Some changes to customary methods for building websites are important not only to ensure accessibility, but to organize sites so they are easy to build and maintain. The most notable of these changes is the shift to cascading style sheets (CSS), which is web jargon for character and paragraph styles as they are commonly used in Word, PageMaker, and other publishing applications. The design concept is to separate the formatting tags from the content. With this method, the same text file used for one web page could be used as a COE webpage with few changes to HTML tags.

For web pages, cascading style sheets allow you to define both styles and positions on the page. Currently, the positioning capabilities of cascading style sheets are not recommended for use because they aren't considered standard.

Quick-reference for Dreamweaver

DATES. Each page must have a creation date and last modified date. On the COE server, date displays are usually automated.

CONTACT FOR ALTERNATIVE CONTENT. Each website must contain an accessible link or a person to contact if people have trouble accessing content within the site. The COE site contains a link to the webmaster and a link to the content creator on most pages and sites. A "mailto" link is used to send requests to a person who could provide an alternative format for information.

FONT STYLES. Avoid FONT, B, and I tags. Use the most recent HTML standard tags, which discourage FONT and CENTER. Use cascading style sheet files instead. Test pages without the cascading style sheets. Cascading style sheets are currently used throughout the site. Text-only pages are not considered the best alternatives for HTML formatted pages.

IMAGES. Use an ALT tag for any image. An ALT tag holds alternative text that describes a picture or other nontext element. Click each image or other nontext element and use Dreamweaver's Properties Inspector panel to fill in text for ALT. Avoid using images for headings; use standard heading tags instead. Use cascading style sheets to create custom formats for these tags. The main idea is to avoid using images in place of text headings. Insert images at the same size you want them to appear, rather than relying on WIDTH and HEIGHT tags. Use redundant text tags for navigation bars and put the text equivalents at the bottom of the page. Images on the COE site have ALT tags, and the standard procedure for compiling webpages reports an error when ALT tags are missing.

Use up to 50 characters to describe the image for someone who can't view it easily. If the image is purely decorative, use ALT="Decorative image of ... ." If it is a 1-pixel spacer use ALT=" ". Consult accessibility resources about options for longer descriptions.

COLOR. Some people cannot discriminate color easily. Accompany color with an alternative, such as an asterisk for color labels.

TABLES. In tables, use TH for table headers and TD for table cells. Keep tables small. Use the table labels prescribed for accessible tables. TABLE WIDTH: Specify as a percentage instead of fixed pixels. Example: TABLE WIDTH="100%", not TABLE WIDTH="550". This is encouraged, but not required.

New tagging for tables is under development for Dreamweaver because the reading order of table rows and columns can be difficult for screen readers to follow.

PDFs. Use the Tools > Accessibility Checker in Adobe Acrobat to test PDFs for accessibility. Consult accessibility resources for repair strategies.

SCRIPTS. Scripts are referred to as "behaviors" in Dreamweaver. If you use scripts to display content or create interfaces, provide a standard NOSCRIPT option. Image rollovers are often created with JavaScript. These are acceptable if they are used only for graphical design purposes and don't deliver content.

PLUGINS. Provide a text link in the footer of each page entitled "Accessibility" and link it to http://www.engr.wisc.edu/accessibility.html. This page has information about accessibility and links to sites that offer plugins.

FORMS. Use label tags to help identify the fill-in fields.

NAVIGATION BARS. Use a "Skip To Content" link. Example: <H1><A HREF="#SkipToContent"><IMG SRC="images/spacer1.gif" WIDTH="1" HEIGHT="1" BORDER="0" ALT=" "></A></H1>
.
.

<A NAME="SkipToContent">My content starts here.</A>

Always use client-side imagemaps instead of server-side imagemaps (rarely used nowadays). Both Dreamweaver and Photoshop create the right kind of imagemaps for accessible websites.

FRAMES. Consult accessibility resources for more information if you want to use frames. Always include the <NOFRAMES> option and be sure to manage frame "targets."

BLINK TAGS AND FLICKER. Avoid images or presentations that cause the screen to flicker, which can produce seizures in people with photosensitive epilepsy. There is one instance of a BLINK tag in an eCOW page creation form. Remove it. Consult the accessibility resources for frequency specifications that apply to flicker.

VIDEO. Caption or script videos.

QUIZZES OR TESTS. If there is a time limit, alert the user to alternatives. We will search for quiz, test, and time to find instances.

Test plan

1. Spell-check.

2. Proofreading by a human.

3. Incorporate changes.

4. Back-check changes.

5. Repeat steps 3 and 4 until the copy is clean.

6. View the site in the two most recent versions of Netscape and Microsoft Internet Explorer.

7. Print the pages in the most recent versions of Netscape and Microsoft Internet Explorer if the pages will be widely used in print. Including an accessible PDF is sometimes a better solution for this application.

8. View the site without the cascading style sheet and check whether it is still readable. Redefine styles if necessary.

9. Use a validation checker to test the site. Use several checkers if time permits.

10. Run the site through a screen reader or screen reader emulator to check reading sequence.