Pour les tableaux complexes, vous associez explicitement les cellules de données avec les cellules d'en-tête.

Description
L'objectif est d'expliciter les relations entre les cellules d'un tableau afin d'en rendre la compréhension plus aisée par les utilisateurs de lecteurs d'écran.


Conseil
Les tableaux sont dits "complexes" lorsqu'ils comportent plus d'une ligne de titres ou plus d'une colonne de titres. Dans ce cas, vous devez associer de manière explicite les cellules de données (<td>) et les cellules d'en-tête (<th>).

Pour ce faire, il convient d'utiliser les attributs "headers" et "id". Ces attributs permettent de relier le contenu d'une cellule à l'en-tête correspondant, de sorte qu'une personne malvoyante puisse en permanence faire la liaison entre l'en-tête et la cellule où elle se trouve.


Exemple
Exemple de code HTML :

<table border="1" cellspacing="0" cellpadding="5" summary="Ce tableau présente les consommations des employés. 

Vous trouverez le nombre de tasses consommé pour chaque type de boisson ainsi qu'un sous-total. 

La première colonne comporte des cellules fusionnées.">

<caption>Rapport des consommations des employés</caption>

<tr> 

  <th id="header1">Nom</th>

  <th id="header2">Boisson</th>

  <th id="header3">Tasses</th>

</tr>

<tr> 

  <th id="header1_1" headers="header1" rowspan="3">A. Dupont</th>

  <th id="header2_1" headers="header2 header1_1">Café</th>

  <td headers="header3 header1_1 header2_1">5</td>

</tr>

<tr> 

  <th id="header2_2" headers="header2 header1_1">Thé</th>

  <td headers="header3 header1_1 header2_2">3</td>

</tr>

<tr> 

  <th id="header2_3" headers="header2 header1_1">Sous-total</th>

  <td headers="header3 header1_1 header2_3">8</td>

</tr>

<tr> 

  <th id="header1_2" headers="header1" rowspan="2">B.Dupond</th>

  <th id="header2_4" headers="header2 header1_2">Café</th>

  <td headers="header3 header1_2 header2_4">2</td>

</tr>

<tr> 

  <th id="header2_5" headers="header3 header1_2">Sous-total</th>

  <td headers="header3 header1_2 header2_5">2</td>

</tr>

</table>

Référence WCAG 1.0
(5.2) Pour les tableaux de données qui ont deux niveaux logiques d'en-tête de colonne ou de ligne ou plus, utiliser des balises pour associer les cellules de données et les cellules d'en-tête. (Niveau 1)

Bonnes pratiques connexes

• Utilité d'un sommaire pour les tableaux de données.
  Le sommaire permet de donner à l'utilisateur des indications sur la fonction du tableau.
  
  
• Entêtes des tableaux de données.
  L'objectif est de fournir un point de repère aux utilisateurs qui ont une lecture linéaire du tableau.
  
  
• Accessibilité et tableaux HTML.
  Recourir aux tableaux HTML à des fins de mise en page est une mauvaise habitude qu'il convient de changer...
  
  
• En-têtes de lignes et de colonnes des tableaux de données.
  L'objectif est de faciliter la lecture d'un tableau de données pour les personnes malvoyantes.