Vous êtes à : Blog > Jour 27 - Les tableaux de mise en forme

Jour 27 - Les tableaux de mise en forme

Gérer l’insertion de tableaux de mise en forme dans une page.

Ce que j’ai fait :

lire l’article Les problèmes de la mise en page par tableaux(lien externe) d’Openweb
lire l’article Les tableaux en HTML(lien externe) de Mozilla
lire l’article Tableaux(lien externe) du Guide de l’intégrateur

Ce que j’ai appris

Les tableaux de mise en forme tu n’utiliseras pas

La première recommandation en terme de bonnes pratiques et d’accessibilité est tout simplement de ne pas utiliser de tableaux de mise en forme. Aux débuts du web, quand Flexbox, Grid ou même les spécifications Cascading Style Sheets (CSS) de positionnement n’existaient pas, la mise en page était un vrai défi pour les développeur·se·s. Les tableaux se sont alors révélés être les éléments les mieux adaptés pour réaliser des positionnements et mise en page complexes.

Aujourd’hui, les techniques CSS sont suffisamment développées et supportées par tous les navigateurs pour ne plus avoir à recourir à cette pratique. D’autre part, les tableaux de mise en forme posent de nombreux problèmes qu’Openweb détaille dans son article Les problèmes de la mise en page par tableaux(lien externe) :

ils sont plus longs à s’afficher et consomment plus de ressources
ils sont difficilement maintenables et complexes à modifier
ils alourdissent le poids des pages car ils impliquent d’utiliser beaucoup de balises pour peu de contenu
leur adaptation aux différentes tailles d’écran est complexe car les tableaux sont dimensionnés en fonction de leur contenu par défaut

D’autre part, les tableaux de mise en forme posent des problèmes d’accessibilité. Les technologies d’assistance vont vocaliser le contenu du tableau ligne par ligne, ce qui ne correspond pas forcément au rendu visuel de la mise en page. Le contenu de la page en devient donc complètement illisible et est source de confusion pour les personnes non-voyantes.

Pour autant, tableaux de mise en forme et accessibilité ne sont pas forcément incompatibles. Et il peut arriver que vous ayez à maintenir en ligne des pages anciennes utilisant ce procédé. Nous allons donc voir comment rendre ce type de tableaux accessibles.

Ajouter un `role="presentation"`

Les tableaux de mise en forme doivent être signalés par l’ajout d’un role="presentation" sur la balise <table>. Par exemple :

<table role="presentation">[…]</table>

Le role="presentation" annule la valeur sémantique native du tableau. Un lecteur d’écran ne restituera donc pas un tableau mais uniquement son contenu, comme s’il était du simple texte. Par ailleurs les fonctionnalités de navigation spécifiques aux tableaux (par exemple, flèche droite pour aller à la cellule suivante) ne seront plus actives.

Ne pas utiliser de balises ou d’attributs propres aux tableaux de données

Un tableau de mise en forme ne doit pas posséder de balises ou d’attributs propres aux tableaux de données. Les balises et attributs suivants sont donc à proscrire dans un tableau de mise en forme :

les balises <caption>, <th>, <thead>, <tfoot> et <colgroup>
les balises ayant un attribut role="rowheader" ou role="columnheader"
les attributs scope, headers et axis

La structure globale d’un tableau de mise en forme doit donc ressembler à ceci :

<table role="presentation">
 <tr>
  <td>[contenu]</td>
  <td>[contenu]</td>
 </tr>
 <tr>
  <td>[contenu]</td>
  <td>[contenu]</td>
 </tr>
</table>

Veiller à une restitution correcte en cas de linéarisation du tableau

Comme nous l’avons évoqué plus haut, les technologies d’assistance restituent de manière linéaire le contenu d’un tableau, c’est-à-dire ligne par ligne. Le contenu du tableau est donc lu cellule après cellule, de gauche à droite et ligne après ligne. Ce contenu linéarisé doit rester compréhensible pour les utilisateurs et utilisatrices de lecteur d’écran.