<html xmlns:un="http://usablenet.com/namespaces/508_rules">
   <link rel="stylesheet" href="josh.css">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
   
      <title>Detailed View for rule: Data table should have headers</title>
      <!--
  508/W3C Accessibility Suite OEM V2 for Macromedia Dreamweaver
  (C) Copyright 2001-2005 UsableNet Inc. All rights reserved.
  -->
   </head>
   <body bgcolor="#ffffff">
      <div id="Description">
         <table cellpadding="0" cellspacing="0" border="0" width="100%" class="main">
            <tr>
               <td valign="top" nowrap="true" class="name">Data table should have headers</td>
               <td valign="top" nowrap="true" class="compatibility">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="divider"><img src="dwres:18084" width="100%" height="1"></td>
            </tr>
            <tr>
               <td valign="top" align="right" nowrap="true" colspan="2" class="requirements">
                  Section 508 1194.22(g); 
                  
                  WAI
                  
                  / 
                  
                  WCAG
                  
                  1.0 checkpoint 5.1
                  
               </td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>Issue Description</b><br>
                  
                  <p>
                     The page includes a table that does not have specific cells
                     marked as headers (i.e., with TH tags). If the table is
                     used to present data, add headers to it.
                     
                  </p>
                  
               </td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>How to check</b>
                  
                  <p>
                     If the table presents data, make sure that each row and
                     column has appropriate headers.
                     
                  </p>
                  
                  
                  <p>
                     The simplest way to accomplish this is by defining a table
                     row of cells marked with the TH tag and having the first
                     cell of each other row marked with the TH tag again.
                     
                  </p>
                  
                  
                  <p>
                     In addition:
                     
                  </p>
                  
                  
                  <ul>
                     
                     <li>
                        TH tags should have an ID attribute for identification
                        
                     </li>
                     
                     
                     <li>
                        TD tags should have a HEADERS attribute that refers to
                        the appropriate TH tags
                        
                     </li>
                     
                  </ul>
                  
                  
                  <p>
                     Alternatively, the TH tag may have a SCOPE='col' or
                     SCOPE='row' attribute, meaning that the header refers to
                     the entire column or row, respectively.
                     
                  </p>
                  
                  
                  <p>
                     It might be a good idea to use the ABBR attribute in the TH
                     tag to provide a more concise description of the header to
                     be repeated over and over by specialized browsers.
                     
                  </p>
                  
               </td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>Issue Explanation</b><br>
                  
                  <p>
                     Tables can be used to present data such as a bus schedule,
                     a comparison of regional sales figures, or a listing of
                     employee contact information. Cells in data tables like
                     these are related to each other and usually must be
                     perceived as a group. Tables can also be used to lay out
                     images and text on a page. Each cell in a layout table like
                     this is normally independent and can be viewed on its own.
                     
                  </p>
                  
                  
                  <p>
                     Data tables are used to convey information in a
                     bidirectional medium, which often is not available for
                     certain users. Consider the following examples:
                     
                  </p>
                  
                  
                  <ul>
                     
                     <li>
                        A textual browser may not align rows and columns
                        correctly because, for example, the content of a cell wraps
                        
                     </li>
                     
                     
                     <li>
                        A reading browser sequentially reads the content of the
                        table
                        
                     </li>
                     
                     
                     <li>
                        A Braille reader also sequentially scans the table
                        
                     </li>
                     
                     
                     <li>
                        A browser with a very small display (such as a PDA or a
                        cellular phone) shows only a limited portion of the table
                        
                     </li>
                     
                  </ul>
                  
                  
                  <p>
                     In all these cases, the user has to mentally remember the
                     context of the cell (which row and column does it refer
                     to?). This requirement may be too strong, for example, when
                     the table is large, when the user is under stress, or is
                     impatient to find the needed information.
                     
                  </p>
                  
                  
                  <p>
                     Consider also that in these situations, users might not be
                     able to move directly from one cell of the table to any
                     other. They are constrained to move sequentially, from one
                     cell to its neighbors only (within the same row, for
                     example).
                     
                  </p>
                  
                  
                  <p>
                     Layout tables, on the other hand, are not used to convey
                     information and therefore they do not need to be accessible.
                     Note however that W3C suggests using styles to lay out the
                     content of a page. For more information, see
                     http://www.w3.org/TR/WCAG10-CSS-TECHS/#style-alignment.
                     
                  </p>
                  
                  
                  <p>
                     Note also that layout tables are linearized by
                     non-graphical browsers. In other words, the content of
                     their cells are shown in the sequence they appear in the
                     HTML file. This means that if the cells include buttons,
                     they may be shown in a sequence that is far from being
                     usable. For a detailed discussion, see
                     http://www.jimthatcher.com/webcourse4.htm.
                     
                  </p>
                  
               </td>
            </tr>
         </table>
      </div>
   </body>
</html>