Attention, cette version d'AcceDe Web est obsolète,
pour consulter la dernière version, se rendre sur www.accede-web.com/notices/ !

9.2.4. Utiliser les attributs headers et id pour associer les cellules aux entêtes des tableaux de données complexes

Un tableau de données complexe est un tableau dans lequel les cellules d’entêtes ne s’appliquent pas systématiquement à la totalité des cellules de données d’une ligne ou d’une colonne.

Pour associer les entêtes aux données dans ce type de tableaux, utiliser les attributs id (identifiants) sur les cellules <th> et headers sur les cellules <td>.

Il suffit ensuite de renseigner l’attribut headers avec les identifiants des cellules d’entêtes associées. Si plusieurs entêtes sont associés à une cellule de données, les identifiants doivent être séparés par des espaces dans headers.

<table>
    <caption>Comparatif du chiffre d'affaires des entreprises Dupond et Dupont en France et dans le monde en 2011</caption>
    <tr>
        <th id="entete-un">En millions d'euros</th>
        <th id="entete-deux">En France</th>
        <th id="entete-trois">Dans le monde</th>
    </tr>
    <tr>
        <th id="entete-quatre">Dupond</th>
        <td headers="entete-quatre entete-deux entete-un">50,7</td>
        <td headers="entete-quatre entete-trois entete-un">139,3</td>
    </tr>
    <tr>
        <th id="entete-cinq">Dupont</th>
        <td headers="entete-cinq entete-deux entete-un">27,1</td>
        <td headers="entete-cinq entete-trois entete-un">476,0</td>
    </tr>
</table>

Comparatif du chiffre d'affaires des entreprises Dupond et Dupont en France et dans le monde en 2011
En millions d'euros En France Dans le monde
Dupond 50,7 139,3
Dupont 27,1 476,0

Attention

Les attributs headers et id ne doivent pas être utilisés en combinaison de l’attribut scope.

Remarque

Une bonne pratique d’accessibilité consiste à respecter un ordre logique lorsque les valeurs des attributs id des cellules d’entêtes associées à une cellule de données sont intégrées dans l’attribut headers de cette dernière.

L’ordre de ces valeurs sera l’ordre de lecture par un lecteur d’écran.

Recommandations associées

notices/html-css/utiliser-l-attribut-headers-et-id-pour-associer-les-cellules-aux-entetes-des-tableaux-de-donnees-complexes.txt · Dernière modification: Le 06/03/2013 à 16:52 (modification externe)
 

Projet coordonné par Atalan.

En partenariat avec :

Et le soutien de :