WordPress et accessibilité : comment créer des tableaux de données accessibles ?

Il peut être très difficile de naviguer dans des tableaux de données avec un lecteur d’écran lorsque ces derniers sont mal implémentés.

Voyons ensemble comment saisir des tableaux de données accessibles avec l’éditeur WordPress.

Précision : les indications données dans ces articles sont basées sur l’éditeur classique et l’éditeur Gutenberg de la version 6.1.1 de WordPress. De plus, nous parlons ici du CMS WordPress, mais toutes nos recommandations sont des principes d’accessibilité qu’il est indispensable de respecter, que l’on utilise WordPress ou pas.

Les tableaux de données sont des structures qui peuvent être complexes à parcourir pour les personnes aveugles ou déficientes visuelles : en effet, les unes ne voient pas du tout le tableau, et les autres peuvent n’en voir qu’une partie.

Afin de rendre les tableaux de données simples accessibles et de permettre aux lecteurs d’écran de les restituer comme il faut, il faut s’assurer de :

• si le tableau possède un titre de tableau, bien relier le titre au tableau ;
• structurer les cellules d’en-tête ;
• structurer les cellules de données.

Relier les en-têtes de colonnes et/ou de lignes aux cellules du tableau

Pour rendre un tableau de données simples accessible, une manipulation essentielle consiste à relier les en-têtes de ligne et les en-têtes de colonne aux cellules du tableau.

Cela permettra aux personnes aveugles de savoir à quoi sont liées les cellules de données.

Sans ça, elles auront les plus grandes difficultés à comprendre à quoi correspondent les valeurs présentes dans les cellules du tableau, en particulier s’il est long.

Voici comment faire dans l’éditeur de WordPress et Gutenberg :

1. surligner la colonne de tableau concernée ;
2. retourner dans « Tableau » > « Cellules » > « Propriétés de la cellule du tableau » :
   1. dans le champ « Type de cellule », sélectionner « Cellule d’en-tête »
   2. dans le champ « Portée », sélectionner « Colonne ».
3. dans « Tableau » > « Propriétés du tableau », cocher la case « Légende », un espace supplémentaire apparaitra alors en haut de votre tableau pour y ajouter le titre du tableau.

La manipulation est à peu près la même si votre tableau contient des en-têtes de lignes :

1. surligner la ligne de tableau concernée ;
2. aller dans « Tableau » > « Cellules » > « Propriétés de la cellule du tableau » :
   1. dans le champ « Type de cellule », sélectionner « Cellule d’en-tête »,
   2. dans le champ « Portée », sélectionner « Ligne ».

Résultat

Après ces quelques manipulations, les en-têtes de vos tableaux simples sont parfaitement déclarés et seront bien restitués. Bravo !

Dans la vidéo « Démonstration d’un tableau simple avec NVDA », nous pouvons entendre comment est restitué un tableau simple avec le lecteur d’écran NVDA :

Titrer un tableau

Donner un titre accessible aux tableaux est particulièrement important quand il y a plusieurs tableaux sur une même page.

Si ce n’est plus une obligation dans la version 4.1 du RGAA, il reste vivement conseillé de le faire.

En effet, ces titres vont permettre aux personnes utilisant un lecteur d’écran de naviguer de tableau en tableau, jusqu’à ce qu’elles trouvent celui qu’elles souhaitent consulter. Sur WordPress, on appelle cela une « légende de tableau ».

Pour ajouter un titre à votre tableau, dans l’éditeur classique de WordPress, retourner dans « Tableau » > « Propriétés du tableau », puis cocher la case « Légende ».

Un espace supplémentaire apparaîtra alors en haut de votre tableau pour que vous puissiez y ajouter le titre du tableau.

Sur Gutenberg, l’ajout de légende se fait à la fin du tableau, au clic sur « Ajouter une légende ».

Note : l’implémentation de l’éditeur Gutenberg n’étant pas conforme au RGAA, nous vous recommandons d’utiliser l’éditeur classique pour intégrer des tableaux.

Références

• Critère 5.4 [A] Pour chaque tableau de données ayant un titre, le titre est-il correctement associé au tableau de données ?
• Critère 5.5 [A] Pour chaque tableau de données ayant un titre, celui-ci est-il pertinent ?
• Critère 5.6 [A] Pour chaque tableau de données, chaque en-tête de colonne et chaque en-tête de ligne sont-ils correctement déclarés ?
• Critère 5.7 [A] Pour chaque tableau de données, la technique appropriée permettant d’associer chaque cellule avec ses en-têtes est-elle utilisée (hors cas particuliers) ?

Conclusion

Si vous devez insérer un tableau de données dans une page WordPress, n’oubliez surtout pas de structurer les en-têtes du tableau et, si pertinent, d’ajouter un titre au tableau !

En parallèle, n’hésitez pas à aller contrôler les tableaux présents sur votre site WordPress et à les corriger si nécessaire. C’est important !