Cours HTML / Rendre un tableau accessible : caption, scope et cellules fusionnées

Un tableau de données lisible identifie son sujet et précise quels en-têtes de lignes et de colonnes s’appliquent à chaque valeur. Utilisez caption et th, ajoutez scope lorsque cela aide, et fusionnez les cellules uniquement lorsque les relations résultantes restent compréhensibles.

Nommez le tableau avec caption

caption décrit le tableau dans son ensemble et doit être le premier élément enfant de table. Il se distingue d'un titre de paragraphe à proximité car il fait partie du tableau. Si une période ou une méthode de mesure est nécessaire pour interpréter les chiffres, indiquez-la dans la légende ou dans le texte voisin. La légende introduit le tableau ; les noms individuels de lignes et de colonnes restent dans les cellules d'en-tête.

Connectez les données aux en-têtes avec l’attribut scope.

Utilisez scope="col" pour les titres de colonnes et scope="row" pour les titres de lignes. Dans cet exemple, la valeur correspondant à Lundi et Matin est de trois visiteurs.

<table>
  <caption>Visiteurs par jour et par moment de la journée</caption>
  <thead>
    <tr>
      <th scope="col">Jour</th>
      <th scope="col">Matin</th>
      <th scope="col">Après-midi</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Lundi</th>
      <td>3 visiteurs</td>
      <td>5 visiteurs</td>
    </tr>
    <tr>
      <th scope="row">Mardi</th>
      <td>4 visiteurs</td>
      <td>6 visiteurs</td>
    </tr>
  </tbody>
</table>

scope décrit l'orientation de la relation d'un en-tête avec les données ; ce n'est pas une règle de style visuel. Dans un tableau simple, la relation peut être évidente sans cela, mais un balisage explicite facilite l'examen de l'intention. Le tutoriel W3C WAI sur les tableaux explique davantage de modèles.

Fusionnez les cellules uniquement lorsque les données l'exigent

colspan="2" couvre deux colonnes ; rowspan="2" couvre deux lignes. L'exemple suivant regroupe Matin et Après-midi sous un en-tête commun. Le colgroup définit ces deux colonnes afin que scope="colgroup" ait une cible claire. Pour les lignes et cellules sous-jacentes, se référer à Bases des tableaux : table, tr, th et td.

<table>
  <colgroup><col></colgroup>
  <colgroup span="2"></colgroup>
  <tr>
    <th scope="col" rowspan="2">Jour</th>
    <th scope="colgroup" colspan="2">Visiteurs</th>
  </tr>
  <tr>
    <th scope="col">Matin</th>
    <th scope="col">Après-midi</th>
  </tr>
  <tr>
    <th scope="row">Lundi</th>
    <td>3 visiteurs</td>
    <td>5 visiteurs</td>
  </tr>
</table>

Le résultat comporte un groupe de colonnes pour Jour et un groupe de deux colonnes pour Matin/Après-midi. La première colonne est également dans un colgroup explicite afin que sa structure soit lisible sans se fier aux règles d'omission des balises.

N'ajoutez pas de cellules fusionnées simplement pour décorer un tableau simple. Si les lecteurs doivent deviner à quel en-tête appartient un chiffre, simplifiez le tableau ou divisez-le en tableaux plus petits. Le guide W3C WAI sur les en-têtes du tableauau irréguliers donne des exemples plus complexes.

Testez les relations

Indiquez une valeur quelconque et demandez : « Quel jour et quelle heure cela représente-t-il ? » Vérifiez la réponse sans vous fier uniquement à la couleur ou à la position. Testez les écrans étroits pour le contenu tronqué et, pour les tableaux fusionnés complexes, essayez également un lecteur d'écran. Les tableaux doivent représenter des données, et non une mise en page ou un formulaire de saisie. Combinez l'examen des tableaux avec les principes de test manuel dans Bases de l'accessibilité : En-têtes, liens, images et clavier.