Tableaux de données complexes : comment les intégrer de manière accessible en HTML ?

2 commentaires

Après les tableaux de données simples et les tableaux de mise en forme, cette seconde partie de notre série sur l’accessibilité des tableaux HTML s’intéresse aux tableaux HTML qui contiennent des cellules fusionnées et/ou des sous-contextes.

On les appelle « tableaux de données complexes », car ils sont complexes à consulter avec un lecteur d’écran ou une loupe vocalisée.

Voyons ensemble comment créer des tableaux HTML complexes accessibles et conformes au RGAA !

Qu’est-ce qu’un tableau de données complexe ?

Un tableau de données complexe est un tableau :

  • dont les en-têtes s’étendent sur plusieurs lignes ou colonnes ;
  • et/ou dont les en-têtes de colonne ou de ligne ne s’appliquent pas à l’intégralité de la colonne ou de la ligne concernée, par exemple parce qu’il y a des cellules fusionnées et/ou des sous-contextes.

Exemple 1

Un tableau de données sur le site de l’Insee dont les colonnes, qui indiquent le nombre de nuitées par types d’hébergements, sont divisées en milliers et en pourcentages.

Voir le tableau « Figure 2 » sur le site de l’Insee

Exemple 2

Un tableau de données complexe qui aurait éventuellement pu être scindé en deux tableaux, « Disponibilité des logements de vacances à Paris » et « Disponibilité des logements de vacances à Rome ». L’exemple est adapté depuis le tutoriel de la WAI (en anglais).

Disponibilité des logements de vacances

Les colonnes indiquent le type de logement. Les en-têtes de ligne de la première moitié du tableau concernent les disponibilités à Paris. Les en-têtes de ligne de la seconde moitié concernent les logements à Rome.

Studio Appartement Chalet Villa
Paris
1 chambre 11 20 25 23
2 chambres 43 52 32
3 chambres 13 15 40
Rome
1 chambre 13 21 22 3
2 chambres 23 43 30
3 chambres 16 32 40
Afficher le code
<table>
  <caption>
    <h4>Disponibilité des logements de vacances</h4>
    <p>Les colonnes indiquent le type de logement. Les en-têtes de ligne de la première moitié du tableau concernent les disponibilités à Paris. Les en-têtes de ligne de la seconde moitié concernent les logements à Rome.</p>
  </caption>
  <thead>
    <tr>
      <td aria-hidden="true"></td>
      <th id="id1">Studio</th>
      <th id="id2">Appartement</th>
      <th id="id3">Chalet</th>
      <th id="id4">Villa</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="id5" colspan="5">Paris</th>
    </tr>
    <tr>
      <th id="id6">1 chambre</th>
      <td headers="id1 id5 id6">11</td>
      <td headers="id2 id5 id6">20</td>
      <td headers="id3 id5 id6">25</td>
      <td headers="id4 id5 id6">23</td>
    </tr>
    <tr>
      <th id="id7">2 chambres</th>
      <td headers="id1 id5 id7">-</td>
      <td headers="id2 id5 id7">43</td>
      <td headers="id3 id5 id7">52</td>
      <td headers="id4 id5 id7">32</td>
    </tr>
    <tr>
      <th id="id8">3 chambres</th>
      <td headers="id1 id5 id8">-</td>
      <td headers="id2 id5 id8">13</td>
      <td headers="id3 id5 id8">15</td>
      <td headers="id4 id5 id8">40</td>
    </tr>
    <tr>
      <th id="id9" colspan="5">Rome</th>
    </tr>
    <tr>
      <th id="id10">1 chambre</th>
      <td headers="id1 id9 id10">13</td>
      <td headers="id2 id9 id10">21</td>
      <td headers="id3 id9 id10">22</td>
      <td headers="id4 id9 id10">3</td>
    </tr>
    <tr>
      <th id="id11">2 chambres</th>
      <td headers="id1 id9 id11">-</td>
      <td headers="id2 id9 id11">23</td>
      <td headers="id3 id9 id11">43</td>
      <td headers="id4 id9 id11">30</td>
    </tr>
    <tr>
      <th id="id12">3 chambres</th>
      <td headers="id1 id9 id12">-</td>
      <td headers="id2 id9 id12">16</td>
      <td headers="id3 id9 id12">32</td>
      <td headers="id4 id9 id12">40</td>
    </tr>
  </tbody>
</table>

Quels sont les impacts des tableaux de données complexes pour les personnes handicapées ?

Pour rappel, les tableaux de données peuvent être compliqués à utiliser par les personnes aveugles ou très malvoyantes.

Les tableaux de données complexes peuvent aussi poser des problèmes aux personnes présentant un handicap mental ou cognitif, comme la dyspraxie visuo-spatiale [1], en raison de leur organisation particulière et de la densité d’information.

Comment intégrer un tableau de données complexes de manière accessible ?

Pour rendre accessible un tableau de données complexes, il faut s’assurer que les cellules de données soient bien reliées aux en-têtes correspondants et qu’un résumé explique la structure du tableau.

Liaisons entre les en-têtes et les cellules

Comme les tableaux contiennent des cellules d’en-tête fusionnées et/ou des sous-contextes, les liaisons implicites <th><td> sont insuffisantes. Les liaisons scope="col" ou scope="row" le sont également. En effet, les attributs scope servent à identifier les cellules d’en-tête de colonne ou de ligne uniques.

Or, maintenant qu’il y a plusieurs en-têtes de colonne ou de ligne par cellule de données, ils doivent tous être restitués.

Pour cela, on se sert d’attributs headers sur les cellules de données qui permettent de référencer autant de cellules d’en-têtes que nécessaire.

  1. Définir un attribut id à chaque en-tête <th>.
  2. Pour chaque cellule de données, lui définir un attribut headers dont la valeur reprend les attributs id des en-têtes concernés. Les attributs headers acceptent plusieurs valeurs, séparées par des espaces. Par exemple <th id="id1"> et <td headers="id1 id2"> (critère 5.6 [A] — RGAA et critère 5.7 [A] — RGAA).

Résumé du tableau complexe

Le résumé donne le titre du tableau et explique sa structure, c’est-à-dire la manière dont sont répartis les en-têtes ou les données.

  • Pour un tableau de données complexe HTML natif, le résumé doit se trouver dans une balise <caption> (critère 5.1 [A] — RGAA et critère 5.2 [A] — RGAA) ;
  • Pour un tableau role="table", le résumé doit être lié au tableau par un attribut aria-describedby dont la valeur correspond à l’attribut id de l’élément du résumé.

Si le contenu de votre élément <caption> est long, sachez qu’il peut contenir entre autres des titres et des paragraphes. Vérifiez régulièrement la validité de votre code HTML.

Il est préférable que le résumé soit toujours visible ou que l’on puisse l’afficher, par exemple au moyen d’un bouton ou d’un élément <details>.

Autres solutions pour l’accessibilité d’un tableau complexe

  • Scinder le tableau complexe en plusieurs tableaux de données simples (ceux-ci devront bien sûr être accessibles, cf. Comment intégrer des tableaux accessibles en HTML ?).
  • Ou bien fournir une alternative au tableau complexe dans un format accessible non tabulaire, et ajouter une ancre vers cette alternative avant le tableau (et surtout pas après le tableau : elle risquerait d’être difficilement trouvée, voire de n’être jamais consultée). Cette alternative doit contenir le même contenu que le tableau et être structurée à l’aide de titres, de paragraphes et/ou de listes.

Ressources sur les tableaux de données complexes et l’accessibilité

Conclusion de la série « Accessibilité des tableaux HTML »

Comment rendre accessibles des tableaux HTML ? Voici ce qu’il faut retenir !

  • Tableaux de données simples :
    • donnez un titre à chaque tableau de données à l’aide d’une balise <caption> ;
    • structurez chaque tableau de données avec des cellules d’en-têtes <th>, et si nécessaire avec un attribut scope="col" (pour les en-têtes de colonne) ou scope="row" (pour les en-têtes de ligne).
  • Tableaux de données complexes :
    • donnez un titre à chaque tableau de données complexes : ce titre doit inclure un résumé qui explique l’organisation spatiale du tableau ;
    • lier les cellules contenant des données à leurs en-têtes à l’aide d’attributs id et headers ;
    • si votre tableau de données complexes est très dense, vous avez aussi la possibilité de scinder ce tableau en plusieurs tableaux de données simples, ou de proposer une alternative accessible avant le tableau.
  • Tableau de mise en forme :
    • si vous avez besoin de mettre en forme des contenus, préférez la mise en forme CSS à un tableau de mise en forme ;
    • si vous n’avez pas le choix, déclarez chaque tableau de mise en forme avec la propriété ARIA role="presentation", et structurez le contenu à l’intérieur comme il faut (titres, paragraphes, listes, etc.).

Envie de relire la série dans l’ordre ? Direction le premier article : Comment intégrer des tableaux HTML accessibles et conformes au RGAA ?

Des questions ? Envie d’en savoir plus ?

L’accessibilité a encore des secrets pour vous ? Profitez d’une session de formation certifiante Développer des sites web accessibles et conformes au RGAA !

3 jours de formation pour :

  • intégrer les bonnes pratiques de l’accessibilité du web dans votre pratique professionnelle ;
  • maîtriser le développement de sites, d’applications web ou de contenus accessibles ;
  • utiliser les outils de tests (lecteur d’écran, inspecteur d’interface, afficheur d’arbre accessible, etc.).

Cerise sur le gâteau : cette formation peut être financée à 100 % par votre CPF (Compte Personnel de Formation).

N’hésitez pas à nous contacter pour recevoir un devis gratuit et sans engagement !

Demander un devis gratuit

À propos

  • Maïa Kopff

    Experte accessibilité numérique

    Maïa Kopff est experte en accessibilité numérique chez Access42 depuis 2021, où elle réalise des missions d’audit accessibilité numérique et d’accompagnement en accessibilité. Polyvalente, elle anime aussi nos formations au développement et au design accessibles.

2 commentaires

Bonjour Jingwei,

Pour les tableaux éditables, je vous conseille de garder des tableaux de données pour assurer la liaison entre les cellules d'en-têtes et les cellules de données. La distinction entre « tableau de données simples » et « tableau de données complexes » dépend de la structure de votre tableau, par exemple s’il contient des cellules fusionnées ou non.

Il est également nécessaire de donner un nom accessible à chaque champ de formulaire, par exemple à l'aide d'attributs title.

Le motif de conception ARIA Grid peut également vous intéresser, en particulier les exemples « Data Grid Examples ».

Nous restons à votre disposition pour vous accompagner plus en détails sur ce projet si besoin, n'hésitez pas à nous contacter.

Bonjour Maia, merci pour votre article. Auriez-vous des recommandations concernant les tableaux éditables avec des input ou des select ? Faut-il les traiter comme un tableau de mise en forme, un tableau complexe ou un formulaire ? Est-il préférable d'éviter ce type de conception, même s'il est plus pratique pour les utilisateurs experts ?

Les commentaires sont désormais fermés, mais vous pouvez toujours nous contacter pour réagir à cet article !