<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: Layout tables should make sense when linearized</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">Layout tables should make sense when linearized</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">WAI / WCAG 1.0 Priority 2 checkpoint 5.3</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 contains at least one table that is supposed to be for layout
                     purposes (i.e. it does not contain CAPTION, THEAD, TH and TFOOT).
                     	 
                  </p>
                  
                  <p>
                     When linearized, its contents should be read in the expected order and
                     should make sense.
                     
                  </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>
                     Make sure that, when linearized, the content of the layout tables used in the page can be read in the appropriate order. This
                     is conceptually
                     easy: just imagine stripping out all of the tags.
                     	 
                  </p>
                  
                  
                  <p>
                     In certain cases, it is also possible to check by running a piece of paper down the
                     page and reading the page line by line to provide some clues of possible
                     problems. 
                     
                  </p>
                  
                  
                  <p>
                     Consider that tables used to present tabular data should not be
                     linearized as suggested here. They have to be appropriately marked up
                     (with TH, SCOPE, AXIS, ID and HEADERS tags and attributes) to be
                     accessible. Other tests within this program implement the appropriate
                     WCAG or Section 508 guidelines.
                     
                  </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>
                     Often when accessibility is considered only after page templates have
                     been defined and implemented, the table 
                     organization used to lay out the content on a page does not function
                     properly with non-graphical browsers.
                     	 
                  </p>
                  
                  <p>
                     The most common mistake is to forget that HTML tables lay out the
                     information row by row. 
                     
                  </p>
                  
                  
                  <p>
                     Non-graphical browsers follow the row by row order when presenting the
                     content of the table. Even if visual clues would suggest a column by
                     column reading order.
                     
                  </p>
                  
                  
                  <p>
                     Consider the following example (from <strong>HTML Techniques for Web Content Accessibility Guidelines 1.0</strong>
                     [http://www.w3.org/TR/WCAG10-HTML-TECHS/#tables-layout]
                     ): 
                     
                  </p>
                  
                  
                  <blockquote>
                     
                     <p>... if a table is rendered like this on the screen:</p>
                     
                     <pre>
There is a 30% chance of               Classes at the University of Wisconsin 
rain showers this morning, but they    will resume on September 3rd. 
should stop before the weekend.
</pre>
                     
                     <p>This might be read by a screen reader as:</p>
                     
                     <pre>
There is a 30% chance of Classes at the University of Wisconsin
rain showers this morning, but they will resume on September 3rd. 
should stop before the weekend.
</pre>
                     </blockquote>
                  
                  
                  <p>
                     <strong>Linearization</strong> is the process of transforming a
                     two-dimensional structure, like a table, into a mono-dimensional
                     structure. It is the process that any speaking browser or screen
                     reader has to follow in order to render the content of the page via
                     audio.
                     
                  </p>
                  
               </td>
            </tr>
         </table>
      </div>
   </body>
</html>