<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: Multiple headers should be marked in data tables</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">Multiple headers should be marked in data tables</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(h); 
                  
                  WAI
                  
                  / 
                  
                  WCAG
                  
                  1.0 checkpoint 5.2
                  
               </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 tag with a TH tag and does not
                     have any THEAD, TFOOT, TBODY elements. If the table is used
                     to show data and if it includes multiple levels of row and
                     column headers, then consider adopting THEAD, TFOOT, TBODY
                     to mark up such levels.
                     
                  </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 you're using the table to present data and the data is
                     organized in different sections requiring different
                     headers, use the THEAD, TFOOT, TBODY tags (perhaps with
                     COLGROUP and COL) to mark up the different sections.
                     
                  </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>
                     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>
                     If the table is structured in different sections, each with
                     its own row or column headers, then this structure should
                     be clearly marked up so that specialized browsers can take
                     advantage of it and articulate it (perhaps by repeating the
                     appropriate headings when moving to a cell).
                     
                  </p>
                  
               </td>
            </tr>
         </table>
      </div>
   </body>
</html>