Gérer l’insertion de tableaux de données dans une page.

Ce que j’ai fait :

• lire les notices relatives aux tableaux(lien externe) d’AcceDe Web
• lire l’article Les tableaux en HTML(lien externe) de Mozilla
• lire l’article Tableaux(lien externe) du Guide de l’intégrateur

Ce que j’ai appris

Tableaux de données simple et tableaux de données complexe

Le glossaire du Référentiel Général d’Amélioration de l’Accessibilité (RGAA) donne les définitions suivantes :

Un tableau de données est une structure introduite par une balise <table> ou lorsqu’il est correctement restitué par les technologies d’assistance par une balise pourvue d’un attribut WAI-ARIA role=”table”. Cette balise permet de structurer des informations en lignes et en colonnes via des cellules de données et des cellules d’en-têtes.

Lorsqu’un tableau de données contient des en-têtes qui ne sont pas répartis uniquement sur la première ligne et/ou la première colonne de la grille ou dont la portée n’est pas valable pour l’ensemble de la colonne ou de la ligne, on parle de tableau de données complexe.

Un tableau de données présentent donc des informations structurées en lignes et en colonnes. Les cellules de données contiennent direcement les informations du tableau. Les cellules d’en-têtes débutent une ligne ou une colonne et définissent le type de données que contiennent la ligne ou la colonne.

Un tableau de données simple est un tableau dans lequel les cellules d’entêtes sont associées à l’intégralité des cellules de données d’une ligne ou d’une colonne.

Un tableau de données complexe est un tableau dans lequel les cellules d’entêtes ne sont pas associées à l’intégralité des cellules de données d’une ligne ou d’une colonne.

Voici un exemple de tableau de données simple où les en-têtes s’appliquent bien à l’intégralité de leurs colonnes respectives (note de l’autrice : pour les besoins de la démonstration, cet exemple de tableau n’est volontairement pas accessible à ce stade) :

<table>
  <thead>
    <tr>
      <td>Équipements</td>
      <td>Nombre de lignes</td>
      <td>Pourcentage du total de lignes</td>
    </tr>
  </thead>
  <tr>
    <td>Rampe d'accès</td>
    <td>260</td>
    <td>70,46 %</td>
  </tr>
  <tr>
    <td>Annonce sonore</td>
    <td>318</td>
    <td>86,17 %</td>
  </tr>
</table>

Ce qui donne une fois implémenté directement dans la page :

Voici un exemple de tableau de données complexe avec des en-têtes et des cellules de données fusionnées (note de l’autrice : pour les besoins de la démonstration, cet exemple de tableau n’est volontairement pas accessible à ce stade) :

<table>
  <thead>
    <tr>
      <td colspan="2">Malvoyants</td>
      <td colspan="2">Aveugles</td>
    </tr>
  </thead>
  <thead>
    <tr>
      <td>Obstacles contrastés</td>
      <td>Portes contrastées</td>
      <td>Obstacles détectables à la canne</td>
      <td>Guidage en braille</td>
    </tr>
  </thead>
  <tr>
    <td>73</td>
    <td>65</td>
    <td>103</td>
    <td>0</td>
  </tr>
  <tr>
    <td colspan="2">138</td>
    <td colspan="2">103</td>
  </tr>
</table>

Ce qui donne une fois implémenté directement dans la page :

Maintenant que avons bien défini ce qu’était un tableau de données simple et un tableau de données complexe, nous allons voir comment les rendre accessibles.

Recommandations d’accessibilité communes aux tableaux simples et complexes

• un titre définit de façon claire et concise leur contenu : ce titre doit être balisé prioritairment avec l’élément <caption>.
• si des cellules d’en-têtes sont présentes, elles doivent être balisées avec l’élément <th>

Recommandations d’accessibilité spécifiques aux tableaux simples

Pour associer les cellules de données aux cellules d’en-têtes, l’attribut scope doit être utilisé sur les balises <th>. Il permet d’indiquer aux technologies d’assistance s’il s’agit d’une en-tête de ligne ou de colonne.

• s’il s’agit d’une en-tête de colonne, on indiquera scope="col"
• s’il s’agit d’une en-tête de ligne, on indiquera : scope="row"

Voici le code de notre exemple de tableau de données simple reprenant cette fois les recommandations d’accessibilité :

<table>
  <caption>Accessibilité des lignes du réseau de surface RATP</caption>
  <thead>
    <tr>
      <th scope="col">Équipements</th>
      <th scope="col">Nombre de lignes</th>
      <th scope="col">Pourcentage du total de lignes</th>
    </tr>
  </thead>
  <tr>
    <td>Rampe d'accès</td>
    <td>260</td>
    <td>70,46 %</td>
  </tr>
  <tr>
    <td>Annonce sonore</td>
    <td>318</td>
    <td>86,17 %</td>
  </tr>
</table>

Ce qui donne une fois implémenté directement dans la page :

Les cellules d’en-têtes sont bien balisées avec un élément <th> et comportent un attribut scope permettant d’indiquer le type d’en-tête. Un titre explicite le contenu du tableau.

Recommandations d’accessibilité spécifiques aux tableaux complexes

Nous l’avons vu, les tableaux de données complexes comportent des en-têtes ne s’appliquant pas à l’intégralité d’une colonne ou d’une ligne. Afin d’associer clairement, l’en-tête aux données correspondantes, il est recommandé d’employer des attributs id (sur les cellules <th>) et headers (sur les cellules <td>). Si plusieurs en-têtes sont associées à une cellule de données, il convient de séparer les id par des espaces dans headers.

Voici le code de notre exemple de tableau de données complexe reprenant cette fois les recommandations d’accessibilité :

<table>
 <caption>Nombre de gares et points d'arrêts TER, en fonction du type de handicap et du type de dispositif par handicap</caption>
 <thead>
   <tr>
    <th id="malvoyant" colspan="2">Malvoyants</th>
    <th id="aveugle" colspan="2">Aveugles</th>
   </tr>
 </thead>
 <thead>
   <tr>
    <th id="data1" headers="malvoyant">Obstacles contrastés</th>
    <th id="data2" headers="malvoyant">Portes contrastées</th>
    <th id="data3" headers="aveugle">Obstacles détectables à la canne</th>
    <th id="data4" headers="aveugle">Guidage en braille</th>
   </tr>
 </thead>
 <tr>
  <td headers="malvoyant data1">73</td>
  <td headers="malvoyant data2">65</td>
  <td headers="aveugle data3">103</td>
  <td headers="aveugle data4">0</td>
 </tr>
 <tr>
  <td colspan="2" headers="malvoyant">138</td>
  <td colspan="2" headers="aveugle">103</td>
 </tr>
</table>

Ce qui donne une fois implémenté directement dans la page :

Outre les en-têtes et le titre qui sont correctement balisés, le tableau comporte identifiants permettant d’associer clairement chaque en-tête aux données correspondantes.

Note de l’autrice : les exemples de tableaux utilisés dans cet article sont tirés du Guide de l’intégrateur, section relative aux tableaux(lien externe).