Les tableaux peuvent constituer un défi pour ceux qui ne peuvent pas associer visuellement les données à leurs en-têtes de ligne ou de colonne correspondants.

Pour rendre les tableaux de données accessibles, il est nécessaire d'utiliser un balisage HTML approprié qui relie les cellules aux en-têtes de colonnes et de lignes correspondants. Ce type de balisage rend les tableaux navigables cellule par cellule pour les utilisateurs de lecteurs d'écran, en annonçant clairement les en-têtes de chaque colonne et ligne, facilitant ainsi la compréhension du tableau dans son ensemble.

Utiliser des balises de table appropriées

La structure de base d'un tableau doit utiliser les balises HTML spécifiques pour décrire correctement les données. Cela inclut :

• <table> pour définir le tableau lui-même.
• <caption> pour ****inclure une légende descriptive qui résume le contenu du tableau
• **<thead>**et <tbody> pour structurer les sections d'en-têtes et de corps.
• <tr> pour indiquer une ligne de tableau.
• <th> pour les en-têtes de colonne ou de ligne.
• <td> pour les cellules de données.

Note importante: Les tableaux ne devraient jamais être utilisés pour la mise en page.

Exemple :

<table>
  <caption>Tarifs de transport en commun à Laval pour 2023</caption>
  <thead>
    <tr>
      <th id="typeTransport" scope="col">Type de transport</th>
      <th id="tarifRegulier" scope="col">Tarif régulier</th>
      <th id="tarifConcession" scope="col">Tarif de concession</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Bus</th>
      <td headers="typeTransport tarifRegulier">3,50 $</td>
      <td headers="typeTransport tarifConcession">2,25 $</td>
    </tr>
    <tr>
      <th scope="row">Métro</th>
      <td headers="typeTransport tarifRegulier">3,50 $</td>
      <td headers="typeTransport tarifConcession">2,25 $</td>
    </tr>
  </tbody>
</table>

Si une page web est disponible en français et anglais, il n'est pas nécessaire d'utiliser des balises bilingues pour les tableaux. Chaque version de la page doit afficher ses tableaux avec des légendes et des en-têtes dans la langue correspondante.

Associer les en-têtes de tableaux aux cellules de données

Pour les lecteurs d'écran, il est crucial d'associer les en-têtes de colonnes et de lignes aux cellules de données correspondantes. Utiliser les attributs scope et headers :