ADVANCED DRAFT COPY

Page Author Guidelines - Version 8
Unified Web Site Accessibility Guidelines

January 20, 1998

Compiled by:
Gregg C. Vanderheiden Ph.D., Wendy A. Chisholm, M.S.,
Trace R and D Center, University of Wisconsin - Madison
For the Web Accessibility Initiative Guidelines Working Group

(This is a final Trace Center Guidelines Document.
It is compiled in preparation for transfer of the Guidelines to the Web Accessibility Initiative of the W3C.
This guideline reflects recent work of the WAI as well as previous contributions of many other guidelines developers (listed in the Central Reference Document appendix)).   Contributors include: Jim Bell, Jane Berliss, Harvey Bingham, Judy Brewer, Kevin Carey, John Churchill, David Clark, Dan Connolly, Daniel Dardailler, Judith Dixon, Martin Durst, Paul Fontaine, Geoff Freed, Alfred S. Gilman, Larry Goldberg, Jon Gunderson, Markku Hakkinen, Scott Isaacs, Scott Isensee, Jun Ishikawa, Steve Jacobs, Phill Jenkins, Alan Karben, Hiroshi Kawamura, George Kerscher,  Peter Korn, Josh Krieger, Chuck Letourneau, Edmund MacKenty, Murray Maloney, Aya Matsui, Gabriel Michel, Jim Miller, Masafumi NAKANE, Charles Oppermann, Mike Paciello, David Pawson, Michael Pieper, Dave Ragget, T.V. Raman, Jan Richards, Madeleine Rothberg, Jutta Treviranus, Steve Tyler, Jaap Van Lelieveld,  Jason White, Tom Wlodkowski, ATRC, CAST, InfoUse, NCR, WGBH, WINGS, YRIF, and the WAI IG and GL Working groups

(If you have contributed and your name or organization is missing from the above list, inform us via e-mail so that we may correct our omission - and we apologize in advance.)

Prepared under funding from
the National Institute on Disability and Rehabilitation Research (NIDRR),
Office of Special Education and Rehabilitation Services (OSERS),
US Department of Education
The US Postal Service's WINGS project and
the NCSA-PACI Universal Design / Disability Access Project.

(This is a living document. Comments and suggestions are solicited.)

 Rating System

[Required]   - Required for some groups of users to access the information on a page.

[Recommended] - Makes page easier to understand and use.

Classification System

[Interim] - Strategies needed to make pages accessible for today's browsers and assistive technologies

[New] - Strategies that will take advantage of new features being incorporated into supported tomorrow's browsers and assistive technologies (which incorporate Web Access Initiative recommendations).

If a recommendation has several possible strategies, the strategies are classified, if not the recommendation itself is classified.  Those recommendations and strategies that have no classification work for both old and new browsers.

Style Sheets - Controlling the presentation of an HTML document

1. [Required]  
     Use style sheets to position text and objects within pages, rather than physically marking up text and graphics (e.g. <B> or the "align" attribute of <IMG>) (However, continue to use logical elements such as STRONG, H1, etc.  to provide semantic coding within the body of the page) [New]

   Use style sheets rather than:

   • converting text to images or alternative text file formats (such as PDF)
   • using tables or PRE elements to layout pages
   • using proprietary extensions
   • using "invisible" images to layout pages
   • writing a program to accomplish something that is possible with style sheets or plain HTML

   Use style sheets to:

   • position text and graphics
   • create drop caps, subscripts and superscripts
   • avoid uncommon typographic characters or constructions (such as ASCII art, etc.)
   • create alternative versions of a page. Whether or not you anticipate your page being viewed on alternative media, such as a PDA, a speech-based browser or paper (printed), it is a good idea to create style sheets for alternative media to facilitate readability.   Example media types are screen, print, projection, braille, and speech.
   • highlight sections of a document with font size, formatting or color
     
     
2. [Required]  
     Ensure that your pages are readable and usable without style sheets (e.g. when the browser does not support or the user prefers not to load).  Since style sheets are a new phenomenon, older browsers will not support them and it will take a while for new browsers to support them in a standard way.

For more information:

1. Style Sheets - Chapter 14 in the Central Reference Document
2. Style Sheets - the HTML 4.0 specification
3. Draft recommendation for Cascading Style Sheets (CSS-2) from the World Wide Web Consortia

Images and Image maps

1. [Required]  
     Provide alternative text for all images and image maps. 
   All images should have alternative text that describes the function of the graphic. Examples of possible alt-text are, "Section Title: Banana Products," "Graph of population versus age," or "Search Button."  Possible solution strategies include:
   1. The "alt" attribute is mandatory for the <AREA> and <IMG> elements, but should also be used for <APPLET>, and <INPUT>. For example, <IMG SRC="logo.gif" alt="XYZ Logo">.
   2. [New] If <OBJECT> is used, text can be provided in the body of the <OBJECT> element.  For example, <OBJECT data="logo.gif"> XYZ Logo </OBJECT>


2. [Required]  
     Provide a link to a longer description (i.e., via D-link, or longdesc, etc.) for graphics that present important information (especially charts, tables and diagrams). (Include internal text in image file formats that support it).
   Alternative text descriptions (recommendation #1) are usually short and define the basic purpose of graphic elements. To describe the graphic itself in more detail a link to a longer description should be provided.
   1. [Interim] Provide a D-link next to the graphic that links to a page or a phrase at the bottom of the page with a longer description of the graphic. For example, <IMG SRC="97sales.gif" alt="Sales for 1997"><A HREF="sales.html">D</A>
   2. [New] Use the "longdesc" attribute of the <IMG> element or provide text within the body of the <OBJECT > element.  For example, <IMG SRC="97sales.gif" alt="Sales for 1997" longdesc="sales.html">


3. [Required]  
     Use client-side (instead of server-side) image maps.
   Client-side image maps are similar to server-side image maps except that the information for all of the "hot-spots" within the image are sent to the browser along with the image map picture. Descriptions provided with the URLs can be displayed rather than the graphic. If server-side image maps can not be avoided, see the 5th strategy of the next recommendation.
   
   
4. [Required]  
     Provide a description for each link in an image map.
   Depending on how you've created your image map you have several possibilities:
   1. Use the "alt" attribute of the <AREA> element (with the IMAGE, MAP and AREA elements)

      <IMG src="welcome.gif" alt="Image map of areas in the library" usemap="#map1">
<MAP name="map1">
<AREA coords="0,0,30,30" href="reference.html" alt="Reference">
<AREA coords="34,34,100,100" href="media.html" alt="Audio Visual lab">
</MAP>

   2. [New] Use the "alt" attribute of the <AREA> element (with the OBJECT, MAP and AREA elements)

      <OBJECT data="welcome.gif" usemap="#map1">
alt="Image map of areas in the library" </OBJECT>
<MAP name="map1">
<AREA coords="0,0,30,30" href="reference.html" alt="Reference">
<AREA coords="34,34,100,100" href="media.html" alt="Audio Visual lab">
</MAP>

   3. [New] Use the "title" attribute of the <A> element (with the OBJECT and SHAPES elements)

      <OBJECT data="welcome.gif" shapes>
Areas in the library
<A coord="0,0,30,30" href="reference.html" title="Reference">Reference</A>
<A coords="34,34,100,100" href="media.html" title="Audio Visual lab">Audio Visual Lab</A>
</OBJECT>

   4. [New] Create a descriptive paragraph within the <OBJECT> element that includes the links (using the OBJECT and A elements)

      <OBJECT data="welcome.gif" shapes>
There are several areas in the library  including <A coord="0,0,30,30" href="reference.html">Reference</A> and <A coords="34,34,100,100" href="media.html"> the Audio Visual Lab</A>.  More text can follow or precede.
</OBJECT>

   5. If a server-side image map has to be used, provide a list of the image map choices (links) as text links on the same page, on an alternative page that is accessible, or within the body of the <OBJECT> element (similar to method #4 above). To avoid confusion, if providing the list of links following the image map, you should indicate within the alt-text of the image map that this is so.
      
      
5. [Recommended]  
     Provide descriptive titles for all images used as links.
   Use the "title" attribute of the <A> element to provide more information about images used as links (usually a graphical button). For example, <a href="home.html" title="XYZ company home page"><IMG SRC="logo.gif" alt="XYZ logo"></A>

For more information:

1. From the Central Reference Document
   1. 13.1 Introduction to the issues
   2. 13.2 General recommendations
   3. 13.3 Viewing and interacting with static images and image maps
2. Objects, Images and Applets - the HTML 4.0 specification

Applets and Scripts

1. [Required]  
     Provide a <NOSCRIPT> option for all scripts.
   For example:

   <SCRIPT type="text/tcl">
...some Tcl script to show a billboard of sports scores...
</SCRIPT>
<NOSCRIPT>
<P> To access today's scores <A href="scores.html">visit our text-only version.</A>
</NOSCRIPT>



2. [Required]
     Provide a mechanism for the user to freeze any moving or blinking objects, particularly those that contain text.
   In the following example created by Mark Novak, if the user presses the escape key while the Java marquee has focus, the text will be displayed statically. View the example.
   
   
3. [Required]
     Provide alternative text for all applets.
   1. [Interim] Use the "alt" attribute of the <APPLET> element, such as:

      <APPLET code="Press.class" width="500" height="500" alt="Java applet: how temperature affects pressure.">
As temperature increases the molecules in the balloon...
</APPLET>

   2. [New] Use an alternative of the <OBJECT>element, such as:

      <OBJECT classid="Press.class" width="500" height="500" title="Java applet: how temperature affects pressure.">
As temperature increases the molecules in the balloon...
</OBJECT>



4. [Required]
     Provide descriptions of applets that present important information.
   1. [Interim] Use the <APPLET> element to provide a description (see the previous example).  Complete text descriptions could be substituted for the "Hello World!" message.
   2. [New] Use the <OBJECT> element (see the previous example).  Complete text descriptions and other accessible objects (see recommendation #5) could be substituted for the "Hello World!" message.
      
      
5. [Required]  
     If an applet gathers information, provide an alternative mechanism to gather the information.
   As with the previous two recommendations, an alternative such as a user-input form, e-mail address, phone or fax number could be provided within the alternative text of either the <APPLET> or <OBJECT> elements.
   
   
6. [Required]  
     If an applet requires a user interaction (e.g. the ability to manipulate a physics experiment) that can not be duplicated in an alternative format, make the applet directly accessible.
   The guidelines for accomplishing this are included within the Java Accessibility project, and are not yet complete.
   
   
7. [Recommended]  
     For applets embedded with the <OBJECT> element, provide alternative, accessible presentations of information within the <OBJECT> element body. [New]
   In HTML4.0 the <APPLET> element has been replaced by the <OBJECT> element. The <OBJECT> element supports nesting of objects for alternative  renderings. For example:

   <!-- First, try the pressure applet -->
<OBJECT title="How temperature affects pressure" classid="Press.class" width="500" height="500">
<!-- Else, try the MPEG video -->
<OBJECT data="pressure.mpeg" type="application/mpeg">
<!-- Else, try the GIF image -->
<OBJECT data="Pressure.gif">
<!-- Else render the description and an alternative exercise -->
As temperature increases the molecules in the balloon...
</OBJECT></OBJECT></OBJECT>



8. [Recommended]
     Make scripts and applets keyboard operable (using standard conventions).
   
   
9. More exploration is needed in this area. Please stay tuned.

For more information:

1. From the Central Reference Document
   1. 13.1 Introduction to the issues
   2. 13.2 General recommendations
   3. 13.4 Applets
   4. 18 Scripts
2. Objects, Images and Applets - the HTML 4.0 specification
3. Scripts - the HTML 4.0 specification

Audio and Video

1. [Required]
     Provide a text transcript file for all information presented auditorally.
   A transcript is a textual representation of all dialogue, and audio information.
   
   
2. [Required]
     Provide descriptions of all video information in an auditory form.
   Audio  descriptions of video action provide additional information during breaks in the dialogue of a movie about the actions that are occurring.
   
   
3. [Required]
     Provide a separate text transcript file of all video descriptions.
   A text transcript of video action provides the same information as in recommendation #2 but in a format accessible to those with no audio access.
   
   
4. [Required]
     Synchronize transcript and video description information with audio/video information, either directly or via a synchronization file.
   Some media formats such as QuickTime (for Macintosh) movies provide alternative tracks that can be used to add captioning and video descriptions.
   1. [Interim] Until the format you are using supports alternative tracks, two versions of the movie could be made available, one with captions (and descriptive video) and one without.
   2. [New] Future technologies will allow separate audio/visual files to be combined with text files via a synchronization file to create captioned audio and movies. It will also allow the user to choose from multiple sets of captions to match their reading skills.  For more information see the SMIL specification.
      
      
5. TBD
     Provide visual notification of sounds that are played automatically.
   This can be provided in the form of a text phrase on the page that links to a text transcript or description of the sound file. The link to the transcript should appear in a highly visible location like the top of the page. However, if a script is automatically loading a sound, it should also be able to automatically load a visual indication that the sound is currently being played and provide a description or transcript of the sound. The controversy surrounding this recommendation is that the browser should load the semantic information instead of the auditory if the user preferences are set to do so. However, how do we resolve this so it will work with today's browsers.
   
   
6. Design Trick: Use the "TITLE" attribute to provide a brief description within the link to very short sounds.
   For example, <a href="mittens.wav" title="meow"></a>

For more information:

1. From the Central Reference Document
   1. 13.1 Introduction to the issues
   2. 13.2 General recommendations
   3. 13.5 Audio and video
2. Objects, Images and Applets - the HTML 4.0 specification

Text - Paragraphs, Horizontal Lines, Phrases, Punctuation and Symbols

1. Refer to the section about Style Sheets for information about formatting and positioning text and graphics.
   
   
2. [Recommended]
     Use logical styles rather than physical markups.  Do no misuse logical elements.
   Logical: DFN, EM, CITE, CODE, KBD, SAMP, STRONG, VAR, H1, H2, etc.
Physical: size=14, B, I.
   This makes it easier for users to adjust the look of the screen (e.g., larger print, color contrast, etc.) when they apply their own style sheets or for browsers to adjust the presentation of the document based on user settings. The other advantage of logical elements is that they help enforce consistency in your documents.  It also leaves open the possibility for more sophisticated uses of the semantic encodings in the future.  For example, the Lycos indexing system can take advantage of semantic encoding to create abstracts of documents. Alternatively, browsers can navigate through a document by  logical styles, such as headers. Only use logical elements for what they represent.  For example, avoid using <cite> to undent a paragraph.
   
   
3. [Recommended]
     Avoid using the BLINK and MARQUEE elements. [Interim]
   Use another method to draw attention to text such as text size or color.
   
   
4. [Recommended]
     Properly nest headings. (Use style sheets for formatting [New] ).

Testing tips

• To test if the text and background contrast is sufficient enough to be read by people with color deficiencies or on low resolution monitors, view your pages with a monochrome monitor.
  
  
• To get a better understanding of what a screen reader would present to a user, do not load the images on a page when viewing with a graphical browser or use a text-based browser such as Lynx.

For more information:

1. Text - Chapter 9 in the Central Reference Document
2. Text - the HTML 4.0 specification

Lists and Outlining

1. [Recommended]
     Correctly encode list structure and list items with proper HTML elements (UL, OL, LI). (Use style sheets to adjust item spacing [New]).

Tips and tricks:

• Using a numbered (ordered) list makes it easier for people accessing the page auditorally to keep track of where they are within a list.

For more information:

1. Lists and Outlining - Chapter 10 in the Central Reference Document
2. Lists - the HTML 4.0 specification

Tables

1. [Required]
     Explicitly associate table cells with row and column labels. [New]
   Future browsers and assistive technologies will be able to automatically translate tables into linear fashions if tables are tagged appropriately.  Refer to the first two tables examples given in the appendix.
   
   
2. [Required]
     Avoid using tables or <PRE> elements to arrange text documents in columns or otherwise layout a page. (Use style sheets to position graphics and text [New]).
   
   
3. [Recommended]  
     Provide abbreviations for lengthy row or column labels.   [New]
   Abbreviations should be short but meaningful.  This will be particularly useful for future speaking technologies that will read row and column labels for each cell.   Abbreviations cut down on repetition and reading time.  Refer to the examples given in the appendix.
   
   
4. [Recommended]  
     Provide summaries of tables. [New]
   Summaries of table structure and purpose are especially useful for non-visual users.  Refer to the examples given in the appendix.
   
   
5. [Recommended]  
     For more complex tables, group information into categories.   [New]
   Future browsers will allow users to select data from a table by asking for categories.  For example, a table contains information about several trips a person has recently made.  One of these trips is to San Jose.  Information on expenses for meals, hotels and transportation are recorded (each in their own column).  There are several locations (San Jose, Seattle, Madison).  The expenses can be grouped into an "Expenses" category and all of the locations into a "Location" category.  The following question could then be asked, "What were all of my expenses in San Jose?" This means "What are all the data cells in the "Expenses=Meals, Hotels, Transport" and "Location=San Jose" categories?  Refer to table example #3 in the appendix.
   
   
6. [Recommended]
     Ensure that alternative text does not wrap within tables used to position graphics. [Interim]
   Test for wrapping using the equivalent window size as that which can maximally fit on a 15-inch monitor using a common resolution such as 800x600 pixels.
   
   
7. TBD
     For tables of text and numbers, provide an alternative page which presents the table information in a linear fashion. [Interim]
   There are several ways to link to alternative pages which are described in more detail in Methods for linking to alternative pages. This has not been rated because we couldn't decide if this was required or recommended.
   
   
8. [Recommended]
     Provide a phone or fax number or e-mail address if tables can not be made accessible.

Testing tips

• To predict how one of today's screen readers might read your table, hold a piece of paper up to your monitor.  As you slide the paper down the monitor,  read the words above the line the paper creates as a sentence.  Ask another person to listen as you read the page out loud without pausing for column gaps.  Can he or she make sense out of what you have read?
  
  
• Another method, to predict how a screen reader will interpret your page, is to save it as a text-only file then open it with a word processing program.  This function is available in the "File" menu in most browsers.

For more information:

1. Tables - Chapter 11 in the Central Reference Document
2. Tables - the HTML 4.0 specification

Links - Hypertext and Media-Independent Links

1. [Recommended]
     Create link phrases that make sense when read out of context (but they are not too verbose).
   A user should be able to select a link from a list of all of the links on a page without reading the context in which the link was used. For example, using "click here" as the text phrase for several links requires a user viewing the page with a screen reader to scout out each link to determine the context before selecting one. However, replacing "click here" with something more descriptive solves this problem. For example, "download this document in ASCII text," "view the full version in HTML," or "to view the text version, click here."
   
   
2. [Recommended]
     Place non-link,  printable characters (surrounded by spaces)  between links which occur consecutively to keep separate links from being read as one by screen readers. [Interim]
   
   
3. Methods for linking to alternative pages:
   1. Provide a visible link at the top of each page to allow a user to move back and forth between the graphic and alternative versions of the page.  [Interim]
   2. Provide the appropriate information in the header of the page so that the browser loads it automatically.  [New]
      If the user has set their default media type to "speech" this will load the alternative page automatically.  For example:

      <HEAD><LINK title="Text-only version" rel="alternate" href="text_only.html" media="speech"></HEAD>

For more information:

1. Links - Chapter 12 in the Central Reference Document
2. Links - the HTML 4.0 specification

Frames - Multi-view presentation of documents

1. [Required]
     Provide a <NOFRAME> option for each <FRAMESET>.
   When using the <NOFRAME> option it is easiest to include all essential information on the bottom of the main frame.  Refer to the example in the Central Reference Document.
   
   
2. [Recommended]
     Title each frame.  [New]
   People accesing the page aurally will more easily keep track of how many frames exist and which is the current one.For example:

   <FRAMESET cols="10%,90%" title="Our library of electronic documents">
<FRAME src="nav.html" title="Navigation bar">
<FRAME src="doc.html" title="Documents">
</FRAMESET>

3. [Recommended]
     Describe the layout and purpose of frames and how multiple frames relate to each other. [New]
   Use the "longdesc" attribute on <FRAME> and <IFRAME> elements to link to a page with descriptions.

For more information:

1. Frames - Chapter 16 in the Central Reference Document
2. Frames - the HTML 4.0 specification

User-Input Forms

1. [Required]
     Do not use image maps to create graphical "submit" buttons.
   
   
2. [Required]
     Explicitly associate labels with their controls. [New]
   For example:

   <FORM action="http://somesite.com/adduser" method="post"
<FIELDSET>
<LEGEND align="top">Personal information</LEGEND>
<LABEL for="firstname">First name: </LABEL>
<INPUT type="text" id="firstname" tabindex="1">
<LABEL for="lastname">Last name: </LABEL>
<INPUT type="text" id="lastname" tabindex="2">
...more personal information...
</FIELDSET>
<FIELDSET>
<LEGEND align="top">Medical History</LEGEND>
...medical history information...
</FIELDSET>
</FORM>

3. [Required]
     Provide alternative text for images used as "submit" buttons.
   For example, <INPUT type="image" name="submit" src="button.gif" alt="Submit">


4. [Recommended]
     Specify a logical tab order with "tabindex".[New]
   For example, (taken from the HTML 4.0 draft)

   <INPUT tabindex="1" type="text" name="field1">
<INPUT tabindex="2" type="text" name="field2">
<INPUT tabindex="3" type="submit" name="submit">


5. [Recommended]
     Group related controls with the <FIELDSET> element.[New]
   see the example for #2 - "Explicitly associate labels with their control."
   
   
6. [Recommended]
     Label a group of controls with the <LEGEND> element. [New]
   see the example for #2 - "Explicitly associate labels with their control."
   
   
7. [Recommended]
     For long lists of selections, group items into a hierarchy.  [New]
   In the near future, browsers will display grouped lists with expanding and collapsing levels of detail.   To group items, use  <OPTGROUP>   elements with a <SELECT> element, such as:

   <FORM action="http://somesite.com/prog/someprog" method="post">
<P><SELECT name="ComOS">
<OPTGROUP label="Comm Servers">
<OPTGROUP label="PortMaster 3">
<OPTION label="3.7.1" value="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1
<OPTION label="3.7" value="pm3_3.7">PortMaster 3 with ComOS 3.7
<OPTION label="3.5" value="pm3_3.5">PortMaster 3 with ComOS 3.5
</OPTGROUP>
<OPTGROUP label="PortMaster 2">
<OPTION label="3.7" value="pm2_3.7">PortMaster 2 with ComOS 3.7
<OPTION label="3.5" value="pm2_3.5">PortMaster 2 with ComOS 3.5
</OPTGROUP>
</OPTGROUP>
<OPTGROUP label="Routers">
<OPTGROUP label="IRX">
<OPTION label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R
<OPTION label="3.5R" value="IRX_3.5R">IRX with ComOS 3.5R
</OPTGROUP>
</OPTGROUP>
</SELECT>
</FORM>

8. [Recommended]
     Include default, place-holding characters in edit boxes and text areas. [Interim]
   
   
9. [Recommended]
     Include a phone number, e-mail address, postal address or fax number for submitting information. 
   
   
10. [Recommended]
      Create keyboard shortcuts for form elements. [New]
    This example assigns "U" as the access key. Typing "U" gives focus to the label which gives focus to the control then the user can input text.

    <FORM action="submit" method="post">
<label for="user" accesskey="U">user name</label>
<input type="text" name="user">
</FORM>

For more information:

1. Forms - Chapter 17 in the Central Reference Document
2. Forms - the HTML 4.0 specification

Tips and tricks to further enhance the usability of pages

1. If, after best efforts, any page is still not accessible, provide a link to an alternative page which is accessible, has equivalent information, and is maintained with the same frequency as the inaccessible page.
   
   
2. Place distinguishing information at the beginning of headings, paragraphs, lists, etc. to decrease the amount of sifting readers perform to find important information.  This is commonly referred to as "front-loading" and is especially helpful for people accessing information serially.
   
   
3. Use the "title" attribute on horizontal rules <hr title="new section">


4. Use the "title" attribute for acronyms and abbreviations <abbr>title="World wide web">WWW</abbr>


5. Use the "title" attribute for very short sounds <a href="mittens.wav" title="meow"></a>


6. Avoid using ASCII art or replace it with an image and alternative text.
   Common typographic characters or constructions to be avoided are emoticons, arrows consisting of dashes and greater than signs -->, etc..
   
   
7. Provide keyboard shortcuts for links.
   The "accesskey " attribute of <LABEL>, <A>, <CAPTION> and <LEGEND> allows an author to associate a keyboard shortcut with the phrase. For example, when associated with a link, it takes the user to the associated document.  <A accesskey="C" href="doc.html">Press C to go to XYZ page</A>


8. Create a single downloadable file for documents that exist as a series of separate pages.
   This facilitiates people reading documents off-line.  Currently,  an archival or compression program is needed to create the single file.  In the near future, user agents will be able to coallate separate pages based on information  in page headers.  The following example shows how to indicate where the first page of the reference manual exists as well as  which page follows the current one.

   <head><title>Reference manual -- Chapter 1</title>
<link rel="Start" title="The first page of the manual"   type="text/html" href="http://someplace.com/manual/start.html">
<link rel="Next" title="Chapter 2" type="text/html" href="http://someplace.com/manual/ch2.html">
</head>

Good Web Site Design Practices

Appendix

Table examples

1. "headers" - The following example, shows how to associate header information with the "headers" attribute.  The "headers" attribute specifies a list of header cells (row and column labels) associated with the current data cell.  This requires each header cell to have an "id."


   <TABLE border="border" summary="This table charts the number of cups of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar.">
<CAPTION>Cups of coffee consumed by each senator</CAPTION>
<TR>
<TH id="t1">Name</TH>
<TH id="t2">Cups</TH>
<TH id="t3" abbr="Type">Type of Coffee</TH>
<TH id="t4">Sugar?</TH>
<TR>
<TD headers="t1">T. Sexton</TD>
<TD headers="t2">10</TD>
<TD headers="t3">Espresso</TD>
<TD headers="t4">No</TD>
<TR>
<TD headers="t1">J. Dinnen</TD>
<TD headers="t2">5</TD>
<TD headers="t3">Decaf</TD>
<TD headers="t4">Yes</TD>
</TABLE>
   

   A speech synthesizer might render this table as follows:
   

   Caption: Cups of coffee consumed by each senator
   Summary: This table charts the number of cups of coffee consumed by each senator, the type   of coffee (decaf or regular), and whether taken with sugar.
   Name: T. Sexton, Cups: 10, Type: Espresso, Sugar: No
   Name: J. Dinnen, Cups: 5, Type: Decaf, Sugar: Yes
   

2. "scope" - The following example associates the same header and data information as the previous example, but uses the "scope" attribute rather than "headers."  "Scope" must have one of the following values:  row, col, rowgroup or colgroup.  Scope specifies the set of data cells to be associated with the current header cell.  This method is particularly useful for simple tables.

   <TABLE border="border"
summary="This table charts the number of cups of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar.">
<CAPTION>Cups of coffee consumed by each senator</CAPTION>
<TR>
<TH scope="col">Name</TH>
<TH scope="col">Cups</TH>
<TH scope="col" abbr="Type">Type of Coffee</TH>
<TH scope="col">Sugar?</TH>
<TR>
<TD>T. Sexton</TD>
<TD>10</TD>
<TD>Espresso</TD>
<TD>No</TD>
<TR>
<TD>J. Dinnen</TD>
<TD>5</TD>
<TD>Decaf</TD>
<TD>Yes</TD>
</TABLE>

3. "axis" - The following example shows how to create categories within a table.

   <TABLE border="border">
<CAPTION> Travel Expense Report </CAPTION>
<TR>
<TH></TH>
<TH id="a2" axis="expenses">Meals</TH>
<TH id="a3" axis="expenses">Hotels</TH>
<TH id="a4" axis="expenses">Transport</TH><TD>subtotals</ TD>
</TR>
<TR>
<TH id="a6" axis="location">San Jose</TH>
<TH></TH><TH></TH><TH></TH><TD> </TD>
</TR>
<TR>
<TD id="a7" axis="date">25-Aug-97</TD>
<TD headers="a6 a7 a2">37.74</TD>
<TD headers="a6 a7 a3">112.00</TD>
<TD headers="a6 a7 a4">45.00</TD><TD></TD>
</TR>
<TR>
<TD id="a8" axis="date">26-Aug-97</TD>
<TD headers="a6 a8 a2">27.28</TD>
<TD headers="a6 a8 a3">112.00</TD>
<TD headers="a6 a8 a4">45.00</TD><TD></TD>
</TR>
<TR>
<TD>subtotals</TD><TD>65.02</TD><TD>224.00& lt;/TD><TD>90.00</TD><TD>379.02</TD>
</TR>
<TR>
<TH id="a10" axis="location">Seattle</TH>
<TH></TH><TH></TH><TH></TH><TD> </TD>
</TR>
<TR>
<TD id="a11" axis="date">27-Aug-97</TD>
<TD headers="a10 a11 a2">96.25</TD>
<TD headers="a10 a11 a3">109.00</TD>
<TD headers="a10 a11 a4">36.00</TD><TD></TD>
</TR>
<TR>
<TD id="a12" axis="date">28-Aug-97</TD>
<TD headers="a10 a12 a2">35.00</TD>
<TD headers="a10 a12 a3">109.00</TD>
<TD headers="a10 a12 a4">36.00</TD><TD></TD>
</TR>
<TR>
<TD>subtotals</TD><TD>131.25</TD><TD>218.00 </TD><TD>72.00</TD><TD>421.25</TD>
</TR>
<TR>
<TH>Totals</TH><TD>196.27</TD><TD>442.00< ;/TD><TD>162.00</TD><TD>800.27</TD>
</TR>
</TABLE>