<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>Vue d&eacute;taill&eacute;e de la r&egrave;gle: Baliser correctement des listes et des &eacute;l&eacute;ments associ&eacute;s</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">Baliser correctement des listes et des &eacute;l&eacute;ments associ&eacute;s</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">Point de contr&ocirc;le 3,6 de priorit&eacute; 2 WAI / WCAG 1.0</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>Description du probl&egrave;me</b><br>
                  
                           
                  <p>
                     La page contient au moins deux images identiques qui ne sont pas des espaces et qui peuvent &ecirc;tre utilis&eacute;es comme puces dans
                     une liste d'&eacute;l&eacute;ments sous forme de tableau.
                     	 
                  </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>Proc&eacute;dure de v&eacute;rification</b>
                  
                  
                  <p>
                     V&eacute;rifiez que les images sont utilis&eacute;es comme puce sur cette page dans les listes d'objets d&eacute;taill&eacute;es. Si tel est le cas, remplacez
                     le tableau et les images par la balise qui convient. Utilisez une liste comme wrapper et un &eacute;l&eacute;ment de liste (LI ou DD et
                     DT) pour baliser chaque &eacute;l&eacute;ment de ces listes. 
                     
                  </p>
                  
                  
                  <p>
                     Utilisez des listes non ordonn&eacute;es (UL), ordonn&eacute;es (OL) (c'est-&agrave;-dire num&eacute;rot&eacute;es) ou des listes de d&eacute;finitions (DL). Les listes
                     peuvent &ecirc;tre imbriqu&eacute;es de plusieurs mani&egrave;res, par exemple, en utilisant une liste UL dans une liste LI d'une liste OL. Il
                     est &eacute;galement possible de modifier le symbole utilis&eacute; comme puce en se servant de la propri&eacute;t&eacute; CSS appropri&eacute;e (list-style).
                     
                  </p>
                  
                  <p>
                     Pour plus d'informations, voir <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>Explication du probl&egrave;me</b><br>
                  
                           
                  <p>
                     Chaque fois que des indications visuelles sont utilis&eacute;es (par exemple, une mise en retrait) pour indiquer le niveau d'imbrication
                     des &eacute;l&eacute;ments du texte, les personnes ne pouvant utiliser ou profiter du rendu des images &agrave; deux dimensions ne seront pas en
                     mesure de voir ces indications. C'est le cas notamment des malvoyants et des aveugles, ainsi que toute personne utilisant
                     un navigateur non graphique, par exemple un navigateur vocal pour t&eacute;l&eacute;phone portable ou assistant personnel.
                     	 
                  </p>
                  
                  
                  <p>
                     Par cons&eacute;quent, il est important d'utiliser la balise de structure appropri&eacute;e permise par le langage HTML pour coder ces indications
                     ayant un r&ocirc;le fondamental. La personne utilisant un lecteur d'&eacute;cran ou un navigateur vocal peut parcourir les niveaux des
                     listes imbriqu&eacute;es si ceux-ci sont correctement cod&eacute;s. Ils peuvent ainsi passer directement &agrave; un &eacute;l&eacute;ment donn&eacute;.
                     
                  </p>
                  
                  
                  <p>
                     Si plusieurs niveaux de listes ordonn&eacute;es (num&eacute;rot&eacute;es) sont utilis&eacute;s, v&eacute;rifiez que les en-t&ecirc;tes num&eacute;rot&eacute;s affich&eacute;s contiennent
                     des informations contextuelles. Par exemple, les &eacute;l&eacute;ments de la liste de second niveau doivent &ecirc;tre num&eacute;rot&eacute;s 1.1, 1.2 ...
                     ou 1.a, 1.b, etc. Puisque les personnes peuvent naviguer librement, les informations contextuelles permettent &agrave; l'utilisateur
                     &eacute;coutant un &eacute;l&eacute;ment, la plupart du temps sans contexte, de mieux identifier l'&eacute;l&eacute;ment de la liste qu'il &eacute;coute actuellement.
                     
                  </p>
                  
                  
                  <p>
                     Par exemple, si les m&ecirc;mes &eacute;l&eacute;ments sont num&eacute;rot&eacute;s : 1, 2, 3, etc., la personne qui &eacute;coute ne pourrait pas distinguer les &eacute;l&eacute;ments
                     faisant partie d'une liste secondaire.
                     
                  </p>
                      
                        
               </td>
            </tr>
         </table>
      </div>
   </body>
</html>