FIRST DRAFT: Six Principles of Accessible Web Design

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

By Kynn Bartlett <kynn@hwg.org>
Revision 98/05/02

INTRODUCTION

The World Wide Web Consortium's Web Accessibility Project
(WAI) 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
gleam 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.  References
after each principle refer back to the guidelines; you
should read each entry for complete information.

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.

Relevant Page Author Guidelines:

 1-1. [Required] All elements comply with an HTML 4.0 definition
      and CSS-1.

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>ist 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."

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.

Relevant Page Author Guidelines:

 1-2. [Required] Pages are readable and usable without style sheets
      (e.g., when the browser does not support them or the user has
      turned them off). 
 1-3. [Required] Headings are nested properly and are not used for
      formatting. 
 1-4. [Required] List structure and list items are correctly encoded
      with proper HTML elements.
 1-5. [Required] Scrolling or blinking text are not used. 
 1-6. [Recommended] Text is formatted through style sheets, not by
      representing it with a graphic (which cannot be searched).
 1-7. [Recommended] Invisible or transparent images are not used to
      force layout. Style sheets are used to control layout.
 1-8. [Recommended] Deprecated presentation elements and attributes
      as well as B and I are not used.
 1-9. [Recommended] HTML structural elements are only used to convey
      meaning, not presentation. 
1-10. [Recommended] HTML presentation elements are only used to convey
      presentation, not structure. 
1-11. [Recommended] Horizontal rules, acronyms, and abbreviations have
      titles.
 5-2. [Required] Tables are not used to arrange text documents in columns. 

PRINCIPLE III:  Use HTML 4.0 features to provide information 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.

Relevant Page Author Guidelines:

1-12. [Recommended] Provide titles for horizontal rules, acronyms,
      and abbreviations.
 2-4. [Recommended] Images used as links have descriptive link titles. 
 4-6. [Recommended] Links to very short sounds have titles. 
 5-1. [Required] Table cells are explicitly associated with row and column
      labels. 
 5-4. [Recommended] Tables of text and numbers are available in a linear
      fashion on an alternative page. 
 5-5. [Recommended] Lengthy row and column labels are abbreviated. 
 5-6. [Recommended] Table summaries are available. 
 5-7. [Recommended] For more complex tables, information is grouped into
      categories. 
 7-3. [Required] All frames have titles. 
 7-4. [Recommended] Links to descriptions of the purpose and layout of
      frames are provided. 
 8-2. [Required] Each label is associated with its form control. 
 8-4. [Recommended] A logical tab order is specified (with the "tabindex"
      attribute). 
 8-5. [Recommended] Related controls are grouped (with the FIELDSET element). 
 8-6. [Recommended] Groups of controls are labeled (with the LEGEND element). 
 8-7. [Recommended] Menu options are grouped (with the OPTGROUP element). 
 
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.

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.

Relevent Page Author Guidelines:

 2-1. [Required] All images and image maps have alternative text. 
 2-3. [Required] All image maps are accessible and keyboard navigable. 
      Furthermore: For each client-side image map, each of the map's links
      has an associated description. For each server-side image map, a list
      of the map's links are provided as text links (on the same page, on
      an alternative page that is accessible, or within the body of the
      OBJECT element). 
 3-6. [Recommended] Scripts and applets are keyboard operable.
 6-3. [Recommended] Links have keyboard shortcuts. 
8-10. [Recommended] Form elements have keyboard shortcuts (with the
      "accesskey" attribute). 

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 concept, 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.

Relevant Page Author Guidelines:

 2-1. [Required] All images and image maps have alternative text. 
 2-2. [Required] Graphics that present important information (especially
      charts, tables, and diagrams) have an associated longer description
      of the graphic (i.e., via a description link or the "longdesc"
      attribute) Furthermore, authors have included internal text in images
      for formats that support it. 
 2-3. [Required] All image maps are accessible and keyboard navigable. 
      Furthermore: For each client-side image map, each of the map's links
      has an associated description. For each server-side image map, a list
      of the map's links are provided as text links (on the same page, on
      an alternative page that is accessible, or within the body of the
      OBJECT element). 
 3-1. [Required] Alternative presentations of content are provided for
      applets and scripts that convey information.
 3-2. [Required] Alternative mechanisms are provided for applets and scripts
      that perform an important function (other than the presentation of
      information).
 3-3. [Required] Applets that require user interaction that cannot be
      duplicated in an alternative format are directly accessible. 
 3-5. [Recommended] Applets have alternative text ("alt" on APPLET, "title"
      on OBJECT). 
 4-1. [Required] All audio information has an associated transcript. 
 4-2. [Required] All video information has an associated audio description. 
 4-3. [Required] All video information has an associated transcript. 
 4-4. [Required] Transcripts and audio descriptions are synchronized with
      audio/video information, either directly or via a synchronization file. 
 4-5. [Recommended] Sounds that play automatically have a visual
      notification that the sound is playing.
 5-3. [Recommended] Tables are not used merely for the purposes of page
      layout (use style sheets instead). 
 5-9. [Recommended] A phone number, fax number, or e-mail address is
      provided if tables can not be made accessible.
 7-1. [Required] Each frame document (the FRAMESET element) has a
      non-frame alternative (e.g., the NOFRAME element). 
 7-2. [Required] An image does not appear directly in a frame but is
      part of a document included in a frame. 
 8-1. [Required] Image maps are not used to create graphical "submit"
      buttons. 
 8-3. [Required] Images used as "submit" buttons have alternative text. 
 8-9. [Recommended] An alternative phone number, fax number, e-mail address,
      or postal mail address is provided for submitting information. 

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.

Relevant Page Author Guidelines:

 2-5. [Recommended] ASCII art has been replaced by images with alternative
      text. 
 3-4. [Required] The user can freeze any moving or blinking text. 
 5-8. [Recommended] Alt-text does not wrap in tables used to position
      graphics. 
 6-1. [Recommended] Link text makes sense when read out of context, but
      is not too verbose. 
 6-2. [Recommended] Lists of links have non-link, printable characters
      (surrounded by spaces) between them. 
 8-8. [Recommended] Edit boxes and text areas have default, place-holding
      characters. 

--
Kynn Bartlett <kynn@idyllmtn.com>      http://www.idyllmtn.com/~kynn/
  Owner, Idyll Mountain Internet       http://www.idyllmtn.com/
  Board member, HTML Writers Guild     http://www.hwg.org/
  Virtual Dog Show Co-Coordinator      http://www.dogshow.com/
  W3C's Web Accessibility Initiative   http://www.w3.org/WAI/

Received on Tuesday, 2 June 1998 23:54:48 UTC