1. SITE DESIGN,


2. GENERAL PAGE DESIGN,


3. HTML DESIGN CHOICES,


4. ADVANCED HTML,


5. PAGE VALIDATION,


6. SYMBOLS that notify users of ACCESSIBILITY, or


7. Link to our SOURCES for more details.

Site design:

• Use a standard page layout throughout the site.
• Use navigation structure that is clear and consistent.
• Offer navigation bars.
• Provide a description of the site layout and how to navigate it.
• Offer a site map.
• Be sure everything can be operated from a keyboard.
• Comply with HTML 4.0 definitions of all elements.
• Make pages readable without style sheets.

Page design:

General:

• Layout uncluttered screens.
• Leave considerable space around all items.
• Avoid tiled backgrounds, because text can become obscured.
• High contrast between text and background is important in choosing colors.  A simple test is to print it in black and white.
• Avoid dark or bright colored backgrounds.
• "Front load" information at the beginning of paragraphs, lists, headings, etc.
• End all sentences, headers, list items, etc. with a period or other suitable punctuation. It will help screen readers interpret lists.
• Use the full text of a date: February 28, 1996.  The 00/00/00 format is subject to misinterpretation.
• Do not use emoticons (those smiley faces) or other drawings done with ASCII text symbols.
• Use vertical lists of hyper links, not several on the same line.
• The text of each link should be brief, yet make sense when read out of context.

HTML:

• Font size and style should be consistent; avoid drastic contrasts.
• Avoid blinking text.
• Avoid "marquee" effect.
• Nest headings properly; do not use them for formatting layout.
• "List elements" should be used to create lists, not to indent text.
• Do not use tables to arrange text documents in columns or for page layout.
• Provide titles for horizontal rules, acronyms, and abbreviations.

Advanced HTML:

• Use alternative text, alt tags, for all graphics, images and image maps.
• Graphics, such as tables, that present important information need an associated longer description of the graphic.
• Table cells should be explicitly associated with row and column labels.
• Image maps should be accessible and keyboard navigable.
• Applets and scripts that convey information need alternative presentations of content.
• Supplement audio information with a transcript.
• Frames must have titles.
• User input forms should not have image maps for graphical "submit" buttons.
• Provide email, fax and telephone addresses for questions about any graphics, forms, applets or other special presentations that may be unclear.
• For more specific guidelines regarding accessibility of graphics, audio and video, applets, forms and more, visit WAI Accessibility Guidelines: Page Authoring (work in progress).

 Page Validation:

• Test your site with a text only browser such as LYNX.  Or try the Web Page Backward Compatibility Viewer.  This page provides a service allowing clients to view their sites without selected browser features, thus simulating the appearance of a text only browser. Available at http://www.delorie.com/web/wpbcv.html.
   
• Test your site with a multiple graphic browser with
• sounds and graphics loaded,
• graphics not loaded,
• sounds not loaded,
• no mouse.
• Test your site with a self voicing browser, such as PWWebSpeak.
• Validate pages with tools such as:
• Bobby. Bobby is a free service of CAST (Center for Applied Special Technology) that will analyze single web pages for their accessibility to people with disabilities. Bobby will also examine a page's HTML to see if it is compatible with various web browsers or HTML specifications.  Founded in 1984, CAST is a not-for-profit organization whose mission is to expand opportunities for all people -- especially those with disabilities -- through the innovative uses of computer technology.
• W3C HTML Validation Service .  This service is provided by the World Wide Web Consortium (W3C) which governs the entire Internet infrastructure.

Symbols of Accessibility for Web sites:

• The Speech Friendly Site Ribbon Award , is presented by

Kathy's Newstand, a speech friendly linking site by Web designer Kathy Anne Murtha, who is herself blind. To display this symbol Web pages must be submitted and judged against Kathy's criteria which are published on her Web site.
• The Web Access Symbol from the

National Center for Accessible Media, Web Access Project  may also be displayed by sites that are accessible.  The Project asks for voluntary compliance with standards accessed through Trace R&D Center .  As described by the Project, the symbol a globe, marked with a grid, and tilted at an angle. A keyhole is cut into its surface.  They remind users that the symbol should always be used with the following alt-text tag: Web Access Symbol (for people with disabilities).

Sources:

• Starling - Accessible Web Page Design: General style.
• Alliance for Technology Access - San Rafael, California.
• WAI Accessibility Guidelines: Page Authoring (work in progress).

1. Welcome Page: Internet Accessibility
2. Internet Accessibility [IA]: Why?
3. IA: Why? Formatted
4. IA: A Case of Fonts
5. You are here.IA: Web Page Design
6. IA: Selecting Tools
7. IA: Technology and Hardware Update
8. IA: Information Resources

Return to  home page.