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.

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.

Exemple tableau accessible

Caractéristiques des océans

Océans

Surface

(en millions de km2)

Profondeur moyenne

Coordonnées

Arctique :

13 000

1 200 m

90° Nord 0° Est

Pacifique :

180 000

4 000 m

0° Nord 160° Ouest

Antarctique :

20 000

4 500 m

60° Sud 0° Est

Atlantique :

87 000

3 900 m

0° Nord 25° Ouest

Indien :

75 000

3 900 m

20° Sud 80° Est

 

<table>
<tr>
<th scope="col">
Surface (en millions de km2)
</th>
<th scope="col">
Profondeur moyenne</th>
<th scope="col">
Coordonnées</th>
</tr>
<tr>
<th scope="row">
Arctique </th>
<td>13 000</td>
<td>1 200 m</td>
<td>90° Nord 0° Est </td>
</tr>
<tr>
<th scope="row">
Pacifique </th>
<td>180 000</td>
<td>4 000 m</td>
<td>0° Nord 160° Ouest</td>
</tr>
...
</table>

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.

Tableau de présentation

Le tableau est utilisé pour présenter un contenu simple, sans aucun entête de colonne.

Pour le rendre compréhensible à tous, le principe est le suivant : l'utilisateur doit pouvoir comprendre son contenu en lisant de gauche à droite, chaque cellule une à une.

Agence nationale pour le programme européen d'éducation et de formation tout au long de la vie (ANEFORE)

ANEFORE asbl est en charge de la mise en œuvre des actions décentralisées du "Programme européen pour l’éducation et la formation tout au long de la vie".

Action locale pour jeunes

L'Action locale pour jeunes conseille et accompagne les jeunes entre l'école et la vie active.


 

Les propriétés du tableau de données ne doivent pas être utilisées : aucun caption, aucun entête. De cette manière, des entêtes inutiles ne seront pas rappelés pour chaque cellule.

Les tableaux de présentation ne sont à utiliser qu'en dernier recours !

Dernière modification le