Comment intégrer des tableaux HTML accessibles et conformes au RGAA ?

Tableaux de données

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

Un tableau de données contient des informations organisées en deux dimensions (colonnes et lignes).

Si le tableau possède un titre, celui-ci sera aussi restitué par les technologies d’assistance.

Un tableau de données doit être équipé d’en-têtes de colonne et/ou d’en-têtes de ligne.

Exemples de tableaux de données simples

<table>
    <caption>Exemple 1 : Mes produits</caption>
    <thead>
        <tr>
            <th>Article</th>
            <th>Quantité</th>
            <th>Prix</th>
            <th>Sous-total</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Pelle</td>
            <td>1</td>
            <td>10,00 €</td>
            <td>10,00 €</td>
        </tr>
        <tr>
            <td>Sécateur</td>
            <td>1</td>
            <td>15,00 €</td>
            <td>15,00 €</td>
        </tr>
        <tr>
            <td>Plantoir</td>
            <td>2</td>
            <td>8,00 €</td>
            <td>16,00 €</td>
        </tr>
    </tbody>
</table>

<table>
    <caption>Exemple 2 : Horaires de la bibliothèque en période scolaire et en période de vacances</caption>
    <thead>
        <tr>
            <th scope="col">Jours</th>
            <th scope="col">Horaires habituels</th>
            <th scope="col">Vacances scolaires</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Lundi</th>
            <td>Fermé</td>
            <td>Fermé</td>
        </tr>
        <tr>
            <th scope="row">Mardi</th>
            <td>12 h - 19 h</td>
            <td>12 h - 18 h</td>
        </tr>
        <tr>
            <th scope="row">Mercredi</th>
            <td>10 h - 19 h</td>
            <td>10 h - 18 h</td>
        </tr>
        <tr>
            <th scope="row">Jeudi</th>
            <td>12 h - 19 h</td>
            <td>12 h - 18 h</td>
        </tr>
        <tr>
            <th scope="row">Vendredi</th>
            <td>12 h - 20 h</td>
            <td>12 h - 18 h</td>
        </tr>
        <tr>
            <th scope="row">Samedi</th>
            <td>10 h - 19 h</td>
            <td>10 h - 18 h</td>
        </tr>
        <tr>
            <th scope="row">Dimanche</th>
            <td>Fermé</td>
            <td>Fermé</td>
        </tr>
    </tbody>
</table>

Quels sont les impacts des tableaux inaccessibles pour les personnes en situation de handicap ?

Les tableaux de données ont un fort impact sur la navigation des personnes aveugles ou très malvoyantes qui utilisent des lecteurs d’écran et des loupes vocalisées.

Comprendre le tableau grâce à ses en-têtes

En effet, dans un tableau, la navigation peut se faire selon deux dimensions.

Les en-têtes de colonne et de ligne sont restitués par les lecteurs d’écran : ces en-têtes doivent donc être correctement déclarés en HTML pour permettre aux utilisateurs et utilisatrices de comprendre la relation entre les différentes cellules du tableau.

Comprendre le tableau grâce à son titre

De plus, les lecteurs d’écran fournissent des raccourcis spécifiques permettant à une personne aveugle ou très malvoyante de lister tous les tableaux présents dans une même page web, pour faciliter une navigation qui peut souvent être longue et fastidieuse.

Si chaque tableau possède un titre, il sera possible de parcourir ou d’éviter le tableau facilement, en fonction de l’information que l’utilisatrice recherche.

Ainsi, quand un tableau possède un titre, celui-ci doit être pertinent, c’est-à-dire que le titre doit permettre de comprendre le thème et les données du tableau.

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

1. Intégrez les cellules d’en-têtes de ligne et de colonne dans des balises <th> (critère 5.6 [A] du RGAA 4).
2. Si le tableau contient à la fois des en-têtes de colonne et de ligne, ajoutez un attribut scope="col" aux balises <th> servant d’en-tête de colonne, et un attribut scope="row" aux balises <th> servant d’en-tête de ligne (critère 5.7 [A] du RGAA 4).
3. Si possible, donnez un titre à chaque tableau. Si le titre est présent à proximité du tableau et permet de l’identifier, intégrez-le dans une balise <caption> à l’intérieur de la balise <table> ^[1] (critère 5.4 [A] du RGAA 4 et critère 5.5 [A] du RGAA 4).

Tableaux de mise en forme

Maintenant que vous savez rendre accessibles les tableaux de données simples, intéressons-nous aux tableaux de mise en forme.

Qu’est-ce qu’un tableau de mise en forme ?

Un tableau de mise en forme consiste à utiliser les balises <table> et <td> pour mettre en forme du contenu (aligner du texte et des images, par exemple).

Un tableau de mise en forme ne sert pas à structurer des données : on n’utilise jamais de balise <th> dans un tableau de mise en forme, par exemple.

Or, les tableaux de mise en forme ont longtemps servi (et continuent parfois de servir…) à la mise en page des sites web. Ils sont aussi souvent utilisés pour l’intégration des lettres d’information envoyées par e-mail, pour pallier le mauvais support du HTML par les clients de messagerie.

En soi, utiliser un tableau de mise en forme pour intégrer du contenu HTML peut ne pas poser de problème pour l’accessibilité, si l’on pense bien à utiliser la propriété ARIA role="presentation".

Voyons quelques exemples !

Exemples de tableaux de mise en forme

Exemple 1

Sur le site de Radio France, les communiqués de presse sont structurés à l’aide de tableaux de présentation.

Exemple 2

Voici un autre exemple de tableau de mise en forme : celui-ci liste des pages de résultats dans un moteur de recherche.

<table role="presentation" style="text-align: center;">
  <tr>
    <td style="text-align: right; vertical-align: top;"><span aria-hidden="true">Y</span></td>
    <td><div aria-hidden="true">o</div><a href="#">1</a></td>
    <td><div aria-hidden="true">o</div><a href="#">2</a></td>
    <td><div aria-hidden="true">o</div><a href="#">3</a></td>
    <td><div aria-hidden="true">o</div><a href="#">4</a></td>
    <td><div aria-hidden="true">o</div><a href="#">5</a></td>
    <td><div aria-hidden="true">o</div><a href="#">6</a></td>
    <td><div aria-hidden="true">o</div><a href="#">7</a></td>
    <td><div aria-hidden="true">o</div><a href="#">8</a></td>
    <td><div aria-hidden="true">o</div><a href="#">9</a></td>
    <td><div aria-hidden="true">o</div><a href="#">10</a></td>
    <td style="text-align: left;"><div aria-hidden="true">upi</div><a href="#">Suivant</a></td>
  </tr>
</table>

Ici, l’utilisation d’un tableau n’était franchement pas nécessaire. Le tableau aurait dû être remplacé par une liste.

Mais, puisque ce contenu a été intégré sans liste, alors le tableau doit obligatoirement posséder la propriété ARIA role="presentation".

Quels sont les impacts des tableaux de mise en forme pour les personnes handicapées ?

Les personnes aveugles et très malvoyantes qui utilisent un lecteur d’écran parcourent le contenu du tableau de manière séquentielle. Elles ont donc besoin que l’information ne repose pas sur la position visuelle des éléments, mais qu’elle suive un ordre logique dans le code source.

Il faut donc prêter attention à l’ordre de lecture des tableaux par les lecteurs d’écran, qui correspond à l’ordre du code source. On parle alors de « contenu linéarisé ».

À savoir : les cellules fusionnées ne seront restituées qu’une seule fois ^[2].

Comment intégrer un tableau de mise en forme de manière accessible ?

Pour résoudre le problème et rendre un tableau de mise en forme accessible, il y a plusieurs précautions à prendre.

1. Assurez-vous que le contenu linéarisé du tableau soit compréhensible (critère 5.3 [A] du RGAA 4) :
   1. présentez le contenu du tableau dans le même ordre que le code source ;
   2. ou remplacez le tableau par une mise en forme CSS ;
   3. faites des tests à l’aide de lecteurs d’écran ^[3].
2. Ajouter une propriété role="presentation" à la balise table (critère 5.3 [A] du RGAA 4). Quand cette propriété ARIA est présente, c’est comme si la balise table devenait invisible aux lecteurs d’écran : ceux-ci ignoreront tout simplement la présence du tableau concerné, qui est juste là pour mettre en forme (c’est-à-dire : faire joli), mais n’a aucune valeur sémantique. Il ne doit donc pas être restitué comme un vrai tableau de données. C’est pourquoi les informations présentes dans un tableau de mise en forme doivent obligatoirement être structurées de manière sémantique à l’aide de balises HTML appropriées, telles que des titres, des paragraphes, des listes, etc. (Critère 8.9 [A] du RGAA 4).
3. Supprimer toutes les balises et attributs relatifs aux tableaux de données : balises <caption>, <th>, <thead>, <tfoot>, propriétés ARIA role="rowheader", role="columnheader" et attributs scope, headers et axis (critère 5.8 [A] du RGAA 4).

Exemple d’ordre illogique

Le tableau suivant liste des ingrédients et des ustensiles pour une recette de cuisine. Il contient des cellules fusionnées :

<table role="presentation">
  <tr>
    <td rowspan="3">Ingrédients</td>
    <td>farine</td>
    <td rowspan="3">Ustensiles</td>
    <td>1 bol</td>
  </tr>
  <tr>
    <td>lait</td>
    <td>1 fouet</td>
  </tr>
  <tr>
    <td>œufs</td>
    <td>1 poêle</td>
  </tr>
</table>

Le problème, c’est que ce tableau va être restitué de la manière suivante par les lecteurs d’écran :

• Ingrédients
• farine
• Ustensiles
• 1 bol
• lait
• 1 fouet
• œufs
• 1 poêle

Cet ordre de restitution n’est pas logique, parce que le lait et les œufs sont restitués dans la section « Ustentiles », alors qu’ils devraient être restitués parmi les ingrédients.

Pour corriger, voici ce que serait la bonne façon de transmettre l’information aux personnes aveugles et malvoyantes, grâce à un ordre de restitution logique :

• Ingrédients
• farine
• lait
• œufs
• Ustensiles
• 1 bol
• 1 fouet
• 1 poêle

Pour que les lecteurs d’écran restituent l’information dans cet ordre de lecture précis, il vaudrait mieux utiliser deux listes titrées et les mettre en forme à l’aide de CSS, plutôt qu’un tableau HTML. Voici ce que ça donnerait :

<div class="flex" style="border: 1px solid #cedae6;align-items: center;justify-content: flex-start;">
<h5 style="font-size: 1em;font-weight: 400;padding: 1rem 4rem 1rem 2rem;margin: 0;font-family: Verdana;flex-grow: 1;">Ingrédients</h5>
<ul style="margin: 0;border-left: 1px solid #cedae6;border-right: 1px solid #cedae6;flex-grow: 1;">
<li style="display: block;border-bottom: 1px solid #cedae6;margin: 0;padding: 1rem 4rem 1rem 2rem;">farine</li>
<li style="display: block;margin: 0;border-bottom: 1px solid #cedae6;padding: 1rem 4rem 1rem 2rem;">lait</li>
<li style="margin: 0;padding: 1rem 4rem 1rem 2rem;display: block;">œufs</li>
</ul>
<h5 style="font-size: 1em;font-weight: 400;font-family: Verdana;padding: 1rem 4rem 1rem 2rem;margin: 0;flex-grow: 1;">Ustensiles</h5>
<ul style="list-style: none;border-left: 1px solid #cedae6;margin: 0;flex-grow: 1;content: no-close-quote;">
<li style="display: block;margin: 0;border-bottom: 1px solid #cedae6;padding: 1rem 4rem 1rem 2rem;">1 bol</li>
<li style="display: block;margin: 0;border-bottom: 1px solid #cedae6;padding: 1rem 4rem 1rem 2rem;">1 fouet</li>
<li style="display: block;margin: 0;padding: 1rem 4rem 1rem 2rem;content: normal;">1 poêle</li>
</ul>
</div>

Conclusion

Comment rendre accessibles des tableaux de données simples et des tableaux de mise en forme ? Résumons !

Tableaux de données simples

1. Donnez un titre à chaque tableau de données à l’aide d’une balise <caption>.
2. Structurez chaque tableau de données avec des cellules d’en-têtes <th>. Si les cellules d’en-têtes sont réparties sur des colonnes et des lignes, pensez à déclarer le type d’en-tête concerné à l’aide d’attributs scope="col" pour les en-têtes de colonne, ou scope="row" pour les en-têtes de ligne.

Tableaux de mise en forme

• Ajoutez la propriété ARIA role="presentation" sur la balise table pour que votre tableau de mise en forme ne soit pas restitués comme un tableau de données.
• Structurez le contenu de chaque tableau de mise en forme de manière sémantique, comme vous le feriez s’il n’y avait pas de tableau : en utilisant des paragraphes, des titres, des listes, etc.

Dans le prochain article de cette série, nous nous attaquerons à un plus gros morceau : l’accessibilité des tableaux de données complexes. Promis, ça va bien se passer. 😉 À bientôt !

Ressources

• How screen readers navigate data tables
• Les impacts des tableaux sur les utilisateurs
• Usage des tableaux dans le rapport Web Almanac de 2022 (en anglais)
• Table Like It’s 2023, un article d’Amy Carney avec de nombreuses ressources
• Tables Tutorial