Les tableaux

De manière générale, tous les tableaux posent de gros problèmes d’accessibilité, notamment pour les aveugles.

Un tableau qui n’est pas correctement formaté ne pourra pas être "lu" de manière compréhensible par les lecteurs vocaux par exemple.

Les tableaux très complexes, possédant de nombreuses lignes et colonnes, risquent de poser des problèmes de lisibilité sur un smartphone. On doit pouvoir comprendre un tableau alors qu’il est affiché sur un seul écran, sans avoir de scrolls verticaux ou horizontaux.

Préférez un contenu présenté en paragraphe ou en liste à puces plutôt qu'en tableau.

Si, malgré tout, les informations ne peuvent être présentées autrement ou qu'elles seront plus compréhensibles sous forme de tableau, alors vous devez distinguer deux types de tableaux :

• Les tableaux de données simples ou complexes.
• Les tableaux de présentation.

Remarque : Avec l'arrivée du standard HTML5, les attributs de style de tableau (cellspacing, cellpadding, width, border, etc. ) sont devenus obsolètes. Pour une meilleure conformité au standard et une meilleure prise en compte par les outils d'assistances, il faudra remplacer ces attributs par des propriétés CSS.

Tableau de données

Un tableau de données est un tableau dont la disposition en lignes et colonnes a une signification. Le tableau doit avoir des entêtes apportant une information aux données du tableau.

L’utilisateur, quel qu’il soit, doit pouvoir se repérer n’importe où dans le tableau.

Les utilisateurs voyants doivent pouvoir établir immédiatement un lien entre les données des colonnes et des lignes.

Les logiciels pour non-voyants doivent pouvoir interpréter facilement les contenus disponibles.

Chaque cellule à l’intérieur du tableau doit être identifiée et liée par ses entêtes. Au niveau du code, ces en-têtes sont identifiées par des balises TH (voir exemple ci-dessous).

Le formatage graphique de ces en-têtes (graisse, couleur, taille de police, etc.) sera défini par la charte graphique et permet au lecteur d’écran d’identifier le TH en tant que "titre" de colonne.

Un aveugle entendra, lorsqu’il est positionné sur la première donnée, "Arctique surface (en million de km²) : 13 000". Puis dans la deuxième, il entendra : " Arctique profondeur moyenne : 1200 m". Ainsi de suite pour les autres cellules.

Le tableau est désigné par un titre permettant de comprendre ce qu’il contient. Il peut être saisi dans la balise "caption" du tableau ou en titre de paragraphe à condition qu’il soit placé juste au-dessus.

• les entêtes de lignes et de colonnes sont identifiés comme des en-têtes dans les propriétés du tableau (utilisation de la balise TH).
• Les cellules "Surface", "Profondeur moyenne" et "Coordonnées" ont un attribut scope="col" pour signifier que l’en-tête s’applique aux cellules de la colonne.
• Les cellules "Arctique", "Atlantique"… ont un attribut scope="row" pour signifier que l’entête s’applique aux cellules de la ligne.

• La cellule intitulée "Océans" est balisée comme un entête avec l'attribut scope="col". Elle s'applique aux en-têtes des lignes "Arctique", "Atlantique"… Ces entêtes de ligne étant suffisants pour comprendre le tableau, cette cellule aurait pu rester sans contenu. Dans ce cas, cette cellule vide ne doit pas être balisée comme un en-tête.