Comment créer des tableaux HTML accessibles à tous ?

L’accessibilité numérique est devenue un des enjeux majeurs dans le développement d’un produit ou service digital. À partir du 28 juin 2025, tous les nouveaux produits ou services numériques (sites Web, applications mobiles, etc.) devront être accessibles à tous. (Voir notre article : « 2 ans pour rendre vos services et produits numériques accessibles ! »)

Tous les éléments d’un produit digital sont concernés par l'accessibilité numérique (le code, le texte, le contraste des couleurs, etc.), et les tableaux ne sont pas exclus.

Dans cet article, je vous explique pourquoi il est important de rendre vos tableaux accessibles. Pour les novices, je reprendrai très rapidement les bases pour réaliser un tableau en HTML. Mais surtout, je vous donnerai les règles pour créer des tableaux conformes aux critères de l’accessibilité numérique. Allez, c’est parti !

Pourquoi rendre vos tableaux accessibles ?

Vous le savez, sur une page Web, les tableaux permettent d’organiser les informations en lignes ou en colonnes. Ils contiennent des cellules facilitant ainsi la lisibilité des informations, la comparaison entre plusieurs éléments, et la mise en avant des éléments pertinents.

Pour un utilisateur lambda, les tableaux permettent, en un seul coup d’œil, de créer des associations visuelles entre les données et ses en-têtes (titres des colonnes et lignes). Mais pour un utilisateur malvoyant et/ou ayant recours aux technologies d’assistance, l’accès à ces liens entre les informations sera limité. Ainsi, il est indispensable que les tableaux soient structurés avec le balisage HTML approprié afin de leur garantir une accessibilité numérique optimale.

Les bases du tableau HTML

Avant de rentrer dans le vif du sujet, je vous propose de revoir les bases pour créer un tableau HTML. Cette partie de l’article est davantage destinée aux apprenants ou aux non-développeurs. Si vous avez déjà de l’expérience, je vous conseille de passer au point suivant. 😉

Alors, pour créer votre premier tableau HTML, il vous faudra utiliser ces 3 balises :

• La balise <table> : elle indique au navigateur qu’il faut afficher un tableau. Tous les éléments se trouvant entre les balises <table> et </table> seront organisés en lignes et en colonnes.
• La balise <tr> (pour table row) désigne une ligne du tableau. Ici, tous les éléments contenus entre les balises <tr> et </tr> seront donc présentés sur une ligne.
• La balise <td> (pour table date) permettra d’afficher le contenu d’une cellule. Pour que le code soit correct, n’oublier pas d’utiliser la balise fermante </td>.

Le tableau HMTL se construit ligne par ligne. Après avoir inséré la balise <table> dans votre code HTML, il faut coder vos lignes une par une.

Comment créer un tableau HTML accessible ?

Maintenant que nous avons revu les bases, je vous propose de nous intéresser exclusivement à l’accessibilité numérique des tableaux.

Les tableaux de données et tableaux de présentation

À l’aide de la balise <table>, nous pouvons construire des tableaux de données et des tableaux de présentation. Ce dernier type de tableau était, auparavant, très utilisé pour réaliser un layout. Si votre tableau est un tableau de présentation, je vous conseille d’ajouter l'attribut role="presentation".

Pour la suite de cet article, je parlerai exclusivement des tableaux de données.

Règle n°1 : titrer votre tableau

Donner un titre à votre tableau est essentiel. Votre titre doit être à la fois concis, pertinent et informatif. L’objectif est de décrire efficacement le contenu et le type de données inclus dans le tableau. Il doit être intégré dans votre code avec la balise <caption> et positionné immédiatement après la balise <table>.

Il est également possible d’utiliser un titre de paragraphe classique (h2, h3, etc.), mais cette fois-ci, la balise <hn> sera placée avant la balise ouvrante <table>. Le titre sera ainsi exclusivement associé au tableau.

Enfin, dans le cas d’un tableau de données complexe, la description associée pourrait être plus longue. Dans ce cas, il est recommandé d’utiliser l’attribut ARIA aria-describedby.

Règle n°2 : identifier les en-têtes de votre tableau

Nous avons tendance à indiquer les en-têtes uniquement par un changement de la couleur, de la taille de la police d’écriture, ou encore de la graisse de cette dernière. Mais est-ce vraiment suffisant pour répondre aux critères de l’accessibilité numérique ? Pour aider les utilisateurs ayant recours aux technologies d’assistance, il est crucial d’identifier les en-têtes des tableaux, qu’ils soient verticaux (pour les colonnes) ou horizontaux (pour les lignes) ou les 2.

L’identification des en-têtes sera particulièrement utile dans le cas des tableaux à double entrée, ou dans le cas où le contenu des colonnes ne serait pas assez explicite (exemple ci-dessous).

Tableau de données ambiguës

Pour baliser ces en-têtes, il faut utiliser la balise <th> et lui associer l’attribut scope. Deux bénéfices quant à l’utilisation de cet attribut :

• Lier les cellules aux en-têtes ;
• Et aider les technologies d’assistance à les identifier.

Et pour être encore plus précis, il faudra indiquer si l’attribut scope est utilisé pour un en-tête de ligne ou de colonne. Comment ? Tout simplement en indiquant dans votre code :

• <th scope="col"> pour un en-tête d’une colonne ;
• <th scope="row"> pour un en-tête d’une colonne.

Et voici le résultat du code présenté précédemment.

Nous venons de voir comment rendre accessible un tableau de données avec uniquement un en-tête pour les colonnes et les lignes. Mais parfois, certains tableaux sont plus complexes, avec par exemple la fusion de colonnes et/ou de lignes.

L’utilisation de l’attribut scope ne permet pas de répondre à ces cas de figure. Il faudra donc utiliser les attributs id et headers. Voici un extrait du code pour réaliser le tableau ci-dessus.

Règles n°3 : n’oubliez pas les tableaux « responsive »

Les tableaux responsive, la terreur des intégrateurs. Là, la solution est relativement simple. Dans le cas d’un tableau trop compliqué à afficher sur un petit écran (exemple : un écran d’un téléphone portable), en accessibilité numérique, il est toléré de pouvoir scroller horizontalement.

Dans votre code, il vous suffira de wrapper le tableau dans une balise <div> et de lui ajouter l’attribut tabindex="0" pour autoriser le focus au clavier et ainsi permettre la navigation horizontale.

Il faudra accompagner ce code HTML des règles CSS suivantes :

Enfin, il existe des cas où nous n’avons pas la main sur le code HTML du tableau (ce qui est souvent le cas avec le CMS Drupal) 😓. Pour réussir cette opération, j’utilise le bout de code JS suivant. Il vous permettra de wrapper vos tableaux.

Et comment faire avec le WYSIWYG de Drupal ?

Chez Adimeo, nous utilisons le CMS Drupal pour réaliser la majorité des projets qui nous sont confiés. Pour rendre les tableaux de nos clients accessibles, mes collègues et moi-même appliquons ce conseil.

Quand des tableaux sont réalisés dans le module WYSIWYG de Drupal, il nous arrive de ne pas pouvoir respecter toutes les règles citées précédemment. Cependant, CKEditor fait bien les choses (attention, ce n’est plus valable avec CKEditor 5).
Dans le back office de Drupal, sur la page de configuration du WISIWYG (configuration > Rédaction de contenu > Formats de texte et éditeurs > page de configuration de l’éditeur), dans un onglet en bas de page, il vous faudra autoriser les attributs pour certaines balises HTML. Après cette petite manipulation, elles s’afficheront correctement dans votre code.

Voilà, je vous ai donné toutes les règles pour que vos tableaux respectent les critères de l’accessibilité numérique. J’espère que cet article vous sera utile pour vos futurs projets.

Vous désirez en savoir davantage sur l'accessibilité ? Nous avons d'autres articles sur le sujet sur notre blog.

Et si vous êtes développeur et que vous avez envie de poursuivre votre lecture avec d’autres articles sur la thématique Drupal, nous avons, sur notre blog technique, des articles qui pourraient vous intéresser. Personnellement, je vous en recommande 2 :

• Le cache Drupal : pour une meilleure gestion des performances !
• Comment améliorer l'UX de contribution sur le CMS Drupal ?

Crédit photo : NanoStockk