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 s’agit 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</caption>
   <tr>
       <th id="entete-1">En millions d'euros</th>
       <th id="entete-2">En France</th>
       <th id="entete-3">Dans le monde</th>
   </tr>
   <tr>
       <th id="entete-4">Dupond</th>
       <td headers="entete-4 entete-2 entete-1">
           50,7
       </td>
       <td headers="entete-4 entete-3 entete-1">
           139,3
       </td>
   </tr>
   <tr>
       <th id="entete-5">Dupont</th>
       <td headers="entete-5 entete-2 entete-1">
           27,1
       </td>
       <td headers="entete-5 entete-3 entete-1">
           476,0
       </td>
   </tr>
</table>
Comparatif du chiffre d’affaires des entreprises Dupond et Dupont en France et dans le monde
En millions d’euros En France Dans le monde
Dupond 50,7 139,3
Dupont 27,1 476,0

Attention

L’attribut headers ne doit pas être utilisé 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.

En effet, un lecteur d’écran (synthèse vocale et/ou plage braille) annoncera les entêtes dans cet ordre.

Commentaires

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page