<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: Properly mark up lists and related items</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">Properly mark up lists and related items</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 3.6</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 pair of identical images that are not spacers and that 
                     might be used as bullets in a table-formatted list of items.
                     	 
                  </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>
                     Check if the images used in this page are used as bullets in
                     itemized lists of objects. If this is the case, replace the table and
                     images with the appropriate markup. Use a list as a wrapper and a list
                     item (LI or DD and DT) to mark each item within these lists. 
                     
                  </p>
                  
                  
                  <p>
                     Use unordered lists (UL), ordered (i.e. numbered) lists (OL), or definition
                     lists (DL). Lists can be nested in various ways, for example, by using a UL
                     within a LI of an OL. It is also possible to change the symbol that is used as a 
                     bullet by using the appropriate CSS property (list-style).
                     
                  </p>
                  
                  <p>
                     More details can be found on <strong>HTML Techniques for Web Content Accessibility Guidelines 1.0</strong>
                     [http://www.w3.org/TR/WCAG10-HTML-TECHS/#lists]
                     . 
                     
                  </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>
                     Whenever visual clues are used (e.g. indenting) to suggest appropriate
                     nesting of content items, it must be noted that those clues will not be
                     available to people who cannot use or take advantage of
                     two-dimensional graphic rendering. This includes visually impaired and
                     blind persons, as well as those using a non-graphical browser, like a
                     reading browser for telephone or a small PDA screen.
                     	 
                  </p>
                  
                  
                  <p>
                     It is therefore important to use the appropriate structural
                     markup that HTML offers to encode such important clues. A user of a
                     screen reader or of a speaking browser can navigate through the
                     levels of nested lists if they are properly encoded. They can jump
                     directly to a certain item.
                     
                  </p>
                  
                  
                  <p>
                     If multiple levels of ordered (numbered) lists are used, ensure that
                     the numbered headings that are shown contain contextual
                     information. For example the items of the second level list should be
                     numbered like 1.1, 1.2 ... or 1.a, 1.b, etc. Since users can navigate
                     freely, the goal of using contextual information is that when an item
                     is read, potentially out of context, it will contain enough
                     information for the listener to understand which item of which list is
                     being read.
                     
                  </p>
                  
                  
                  <p>
                     If the same items were numbered, for example: 1, 2, 3, etc.,then the
                     listener would not be able to differentiate when the items are part of
                     a secondary list.
                     
                  </p>
                  
                  
               </td>
            </tr>
         </table>
      </div>
   </body>
</html>