Six Principles of Accessible Web Design:
An Introduction to the WAI Page Author Guidelines

By Kynn Bartlett <kynn@hwg.org>
Revision 98/12/07

INTRODUCTION

The World Wide Web Consortium's Web Accessibility Project (WAI -- see the list of useful links) has produced an extensive list of guidelines for web page authors with a lot of useful information on designing accessible web pages. Each topic of web authoring, from style and structure to tables to forms, is addressed with detailed instructions on how to maintain accessibility.

This very technical document can sometimes be overwhelming to a new web author, however, and the beginner may not glean the message of the guidelines.

Thus, this introduction document is presented as an examination of the principles upon which the Page Author Guidelines were written; the basic rules for accessible design that formed the specific instances described in each individual entry in the guidelines. You should read the entire set of Guidelines, though, after reading this document; you'll be able to see why they exist and what they mean.

Without further ado:

SIX PRINCIPLES OF ACCESSIBLE WEB DESIGN

• I. Create pages that conform to accepted standards.
• II. Know the difference between structural and presentational elements; use stylesheets when appropriate.
• III. Use HTML 4.0 features to provide information about the purpose and function of elements.
• IV. Make sure your pages can be navigated by keyboard.
• V. Provide alternative methods to access non-textual content, including images, scripts, multimedia, tables, forms and frames, for user agents that do not display them.
• VI. Be wary of common pitfalls that can reduce the accessibility of your site.

PRINCIPLE I: Create pages that conform to accepted standards.

Web pages that follow one of the published standards for HTML, CSS, and other specifications are much more likely to be interpreted correctly by the various user agents (browsers) that exist. If your page is written in "correct" HTML, then you can feel confident you've done your part in providing the user agent with the information it needs to correctly render the page for your browser.

Which standard should you use? HTML 4.0 is preferred, since it incorporates a great number of accessibility features and is the latest recognized standard for HTML; however, any of the following should be acceptable:

• HTML 4.0 Strict
• HTML 4.0 Transitional
• HTML 4.0 Frameset
• HTML 3.2
• HTML 2.0

Additionally, if you use stylesheets, you should conform to either CSS1 or CSS2, preferably the latter.

PRINCIPLE II: Know the difference between structural and presentational elements; use stylesheets when appropriate.

HTML provides some elements that are strictly "structural" -- meaning that they are used to define the structure for a web page, in semantic terms. "This part is <EM>phasized", "this part is an <ADDRESS>", "this is a <LI>st item". Other elements represent specific "presentation", such as "this should be in <B>old", or "this is <CENTER>ed in the middle of the line."

Structural elements are preferred -- you can <EM>phasize a word with a voice-based browser (by raising the volume and/or pitch), but how do you make words "bold"? Structural elements and presentational elements should not be confused with each other.

The HTML 4.0 standard discourages the use of HTML elements to convey presentation; this function is instead given over to stylesheets. It should be noted, though, that stylesheet support is not fully implemented on all user agents; this means that for at least the near future, some presentation elements in HTML will still be used.

PRINCIPLE III: Use HTML 4.0 features to provide rich meta-content about the purpose and function of elements.

HTML 4.0 (and to a limited degree, some previous standards) gives web page authors valuable tools for giving additional information on the function and meaning of various tags, usually through the use of additional attributes such as TITLE or CLASS.

These attributes can be interpreted by sufficiently sophisticated user agents to intelligently render the page elements in a way that provides the user with more information -- thus making the web pages more usable for everyone. As an example that graphical browser users may relate to, many web browsers will render the TITLE attribute of images and other elements as "tool tips", small yellow windows that appear when a mouse pointer is passed over the element in question.

By providing complete information on what a tag "really means" in the larger scope of your page, you can increase the accessibility of your page. Tables and forms, in particular, can benefit from the new attributes in HTML 4.0.

PRINCIPLE IV: Make sure your pages can be navigated by keyboard.

Not all users can use, or will have access to, a graphical pointing device such as a mouse. A good web page will be navigatable via keyboard (or voice) commands. While this is often a user agent (browser) issue, there are things that a web author can do that will cause a page to become unusable with keyboard-only navigation.

One example is imagemaps -- client-side imagemaps should be used instead of server-side imagemaps, and proper ALT tags provided, because these can be utilized by a browser agent to provide keyboard navigation to the user. Another is through the use of the ACCESSKEY and TABINDEX attributes for form elements. Test your pages without using a mouse -- can you navigate your site by keyboard only?

PRINCIPLE V: Provide alternative methods to access non-textual content, including images, scripts, multimedia, tables, forms and frames, for user agents that do not display them.

Not all user agents will be able to display all HTML elements; a wise designer will realize this and plan alternate methods of conveying the same information for user agents which may not be able to fully render the page.

The foremost example of this is the "ALT" attribute, of the <IMG> tag, which allows an author to provide alternative text in case an user agent cannot (or does not) display graphics.

Likewise, when adding complex elements to your web pages, such as sound, animation, forms, frames, tables, or scripts, you should take advantage of the HTML features that let you specify alternate methods of conveying the same information. The <OBJECT> element is a good example of this; nested <OBJECT>s allow you to specify multiple ways to express the same basic content, from a multimedia display down to a plain text summary.

Accessibility on some forms can also be maintained by providing "off-line", or at least, off-web methods of doing things; such as providing an email link or phone number for people who can't use a web response form, for whatever reason.

PRINCIPLE VI: Be wary of common pitfalls that can reduce the accessibility of your site.

Admittedly, this is a catch-all principle; there are some things that don't fall neatly under the other basic principles, but are important to consider anyway, as they can have a drastic effect on how usable your web site is.

Examples of these pitfalls include:

• The use of ASCII art
• Blinking text
• Link names that don't make sense out of context
• Links that aren't separated by printable characters

CONCLUSION

Now that you know the key principles of web accessibility, you should read over the current version of the Web Accessibility Initiative's Page Author Guidelines, as well as the "Techniques" document that goes along with it. You can find both linked from http://www.w3.org/WAI/

© Copyright 1998 by Kynn Bartlett