Les tableaux dans l'accessibilité

Présentation générale #

Un tableau est un agencement d'informations en lignes et en colonnes contenant des cellules facilitant la comparaison et la mise en avant des informations. Ils permettent de présenter des informations tabulaires dans une grille en deux dimensions, ces données sont plus faciles à lire sous forme de tableau.

Cela permet à un utilisateur voyant d'établir rapidement des associations visuelles entre les données du tableau et ses en-têtes.

En revanche, un utilisateur non-voyant n'aura pas accès à tous ces liens entre les informations, c'est pour cette raison qu'il est important que les tableaux soient implémentés avec le balisage HTML approprié afin qu'ils soient le plus accessible possible pour les technologies d'assistance.

Dans la suite de cet article, nous allons voir les principales règles à respecter pour obtenir un tableau accessible.

Mettre une légende/titre à votre tableau #

Il est important de définir un titre à votre tableau. À la fois concis et pertinent, ce texte permettra d'en indiquer le contenu ainsi que le type de données qu'il contient.
Il doit être associé au tableau grâce à la balise caption et doit être le premier élément après la balise d'ouverture table. On peut aussi utiliser un titre h1,h2... placé dans le code juste avant le tableau comme autre moyen d'associer un titre.

Exemple de caption #


<table>
    <caption>Emploi du temps 2022</caption>
    [...]
</table>

Exemple de titre HTML #


<h2>Emploi du temps 2022</h2>
<table>
    [...]
</table>

Ajouter une description aux tableaux complexes #

Si vous êtes dans le cas d'un tableau complexe et vous souhaitez fournir un résumé plus détaillé, il est recommandé d'utiliser l'attribut ARIA aria-describedby.
Il permettra de lier programmatiquement une description à votre tableau.


<p id="info-table">
exemple de description pour aider la compréhension du tableau complexe
</p>

<table aria-describedby="info-table">
    <caption> Emploi du temps 2022 </caption>
    [...]
</table>

Il y a aussi la possibilité d'utiliser l'attribut summary pour donner, en plus, un résumé du contenu d'un tableau, néanmoins cet attribut ne fait plus partie des spécifications HTML 5 et nous ne recommandons pas son utilisation.

Identifier les en-têtes de votre tableau #

Attributs scope #

Pour aider les utilisateurs de technologies d'assistance, il est impératif d'identifier les en-têtes des tableaux, que ce soit pour les lignes ou les colonnes.
Pour baliser ces en-têtes, il faut utiliser la balise th, celle-ci ne doit jamais être vide.

Une fois que les en-têtes sont créés, il faut associer les cellules de données aux en-têtes dont elles dépendent.
L'attribut scope permet de lier programmatiquement les cellules aux en-têtes, et donc aux technologies d'assistances de les identifier.

  • <th scope="col"> pour un en-tête colonne
  • <th scope="row"> pour un en-tête ligne

Attributs id et headers #

Certains tableaux sont trop complexes pour identifier une association horizontale ou verticale stricte (par exemple, fusion de colonnes ou de lignes) entre l'entête et les cellules des données.
L'attribut scope ne permet pas de résoudre ce problème. Il faut utiliser un attribut id unique pour chaque cellule d'en-tête. Pour relier cet en-tête à une cellule, il faudra utiliser l'attribut headers en y rajoutant les id voulus.

Par exemple, on a deux cellules d'entêtes, <th id="toto">Toto</th> et <th id="tata">Tata</th>, le code pour la relier à une cellule de donnée sera <td headers="toto tata">Tota</td>.

Les tableaux doivent utiliser headers/id que si :

  • Le tableau a des en-têtes de colonnes/lignes qui changent à l'intérieur du tableau.
  • Une cellule de données à trois en-têtes ou plus associées (souvent liée à des cellules d'en-têtes qui sont fusionnées)

Cas particuliers des tableaux de mise en forme #

Dans la mesure du possible évitez d'utiliser des tableaux pour faire de la mise en page. Les tableaux sont faits pour présenter des données tabulaires, avant tout, et les CSS permettent, maintenant, de se passer de la mise en forme via des tableaux.

Dans le cas où, vous utilisez un tableau pour faire de la mise en page, vous devez respecter ces règles :

  • l'élément table doit avoir l'attribut role="presentation" afin de retirer la sémantique au tableau
  • les éléments sémantiques propres à un tableau ne doivent pas être utilisés : caption, th, scope
  • assurez-vous que, s'il existe un ordre de lecture spécifique pour comprendre le contenu, cet ordre est respecté lorsqu'on lit le tableau en lecture linéaire (qui suit l'ordre d'apparition dans le code)

Le fait de créer des tableaux accessibles permettra une lecture cohérente de ces données tabulaires avec un lecteur d'écran. Pour naviguer dans un tableau avec Jaws ou NVDA, il existe plusieurs raccourcis spécifiques.

NVDA #

Pour naviguer rapidement de tableau en tableau dans une page, il suffit d'utiliser sur la touche t, si on utilise le raccourci Maj + t, on navigue dans le sens contraire et donc on revient au tableau précédent.

Une fois au sein d'un tableau, il existe plusieurs raccourcis afin de se déplacer à l'intérieur simplement.

  • Ctrl + alt + flèche gauche permet de se déplacer sur la colonne de gauche tout en gardant la même ligne, Ctrl + alt + flèche droite se déplace sur la colonne de droite.
  • Ctrl + alt + flèche bas permet de passer à la ligne suivante en restant sur la même colonne, Ctrl + alt + flèche haut pour passer à la ligne précédente.

Jaws #

Pour Jaws, il faut utiliser la touche Y et Maj + Y pour naviguer entre les tableaux.
Pour parcourir l'intérieur d'un tableau, il existe plusieurs raccourcis :

  • Insert + Ctrl + t permet de lister tous les tableaux
  • Ctrl + alt + flèche gauche permet de se déplacer sur la colonne de gauche tout en gardant la même ligne, Ctrl + alt + flèche droite se déplace sur la colonne de droite.
  • Ctrl + alt + flèche bas permet de passer à la ligne suivante en restant sur la même colonne, Ctrl + alt + flèche haut pour passer à la ligne précédente.
  • Insert + maj + flèche haut permet de lire toute la ligne.
  • Insert + maj + num pad 5 permet de lire toute la colonne.

Exemple de tableau #

Nous allons maintenant vous présenter des exemples de tableaux accessibles.

Tableau simple #

Le premier exemple est un tableau avec seulement des en-têtes sur les colonnes, nous utilisons donc l'attribut scope="row" pour que les technologies d'assistance l’interprète correctement.

Personnes avec leur activité professionnelle
Prénom Nom Genre Métier
John Doe M Inconnu
Marty McFly M Guitariste
Ellen Ripley F Astronaute
Indiana Jones M Archéologue
Sarah Connors F Serveuse 

<table class="table">
 <caption class="h4"> Personnes avec leur activité professionnelle</caption>
  <tr>
    <th scope="col">Prénom</th>
    <th scope="col">Nom</th>
    <th scope="col">Genre</th>
    <th scope="col">Métier</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>M</td>
    <td>Inconnu</td>
  </tr>
  [...]

De cette manière, il est possible de naviguer facilement au sein du tableau à l'aide d'un lecteur d'écran. De plus, tout changement de cellule d'une colonne, ou une ligne, à l'autre, l'en-tête sera vocalisée.

Par Exemple, si on est positionné sur la colonne Prénom, et qu'on utilise le raccourci Ctrl+alt+fleche droite pour passer à la colonne Nom, NVDA vocalise "Nom Colonne 2 + texte de la colonne".

Tableau à double en-tête #

Dans ce deuxième exemple, le tableau est un emploi du temps permettant de savoir rapidement, si le magasin est ouvert ou fermé, en fonction du jour de la semaine et de l'heure.

Ce tableau nécessite deux en-têtes, une pour les jours de la semaine et une autre pour le créneau horaire.

Ouverture du magasin de jouets
Lundi Mardi Mercredi Jeudi Vendredi
09:00 - 11:00 Fermé Ouvert Ouvert Ouvert Fermé
11:00 - 13:00 Ouvert Ouvert Ouvert Ouvert Fermé
13:00 - 15:00 Ouvert Ouvert Fermé Ouvert Ouvert
15:00 - 17:00 Ouvert Ouvert Fermé Ouvert Ouvert 

<table class="table">
 <caption class="h4">Ouverture du magasin de jouet</caption>
  <tr>
    <td></td>
    <th scope="col">Lundi</th>
    <th scope="col">Mardi</th>
    <th scope="col">Mercredi</th>
    <th scope="col">Jeudi</th>
    <th scope="col">Vendredi</th>
  </tr>
  <tr>
    <th scope="row">09:00 - 11:00</th>
    <td>Fermé</td>
    <td>Ouvert</td>
    <td>Ouvert</td>
    <td>Fermé</td>
    <td>Fermé</td>
  </tr>
  [...]

Tableau complexe #

Dans cet exemple, certaines cellules données ont trois en-têtes associés, il faut donc utiliser les attributs id et headers.

Vu que le tableau est complexe, on peut rajouter une description afin d'aider les utilisateurs à comprendre le tableau.

Tableaux permettant de calculer le taux de conformité d'un site internet.
Pour chaque page les critères peuvent être conformes, non-conformes ou non-applicables, et ont deux niveaux de difficultés : Débutant ou confirmé

Critères Conformes Non-conformes Non-applicables Taux de conformité
Niveau Débutant Confirmé Débutant Confirmé Débutant Confirmé
Accueil 17 13 0 0 13 7 100%
Article 17 12 0 1 13 7 97% 

<p class="border-top border-light" id="tblDesc">Description du tableau</p>
<table aria-describedby="tblDesc" class="table">
 <caption class="visually-hidden position-relative">Synthèse par niveau</caption>
 <tr>
    <th id="critere">Critères</th>
    <th id="conforme" headers="critere" colspan="2">Conformes</th>
    [...]
  </tr>
  <tr>
    <th id="niveau">Niveau</th>
    <th id="debutant-conforme" headers="niveau conforme">Débutant</th>
    <th id="confirme-conforme" headers="niveau conforme">Confirmé</th>
    [...]
  </tr>
  <tr>
    <th id="accueil">Accueil</th>
    <td headers="accueil conforme debutant-conforme">17</td>
    <td headers="accueil conforme confirme-conforme">13</td>
    [...]
  </tr>
  [...]