Rendez-vous accessibilité - Les tableaux

De manière générale, tous les tableaux posent de gros problèmes d’accessibilité, notamment pour les aveugles. En effet, un tableau qui n’est pas correctement formaté ne pourra pas être « lu » de manière compréhensible par les lecteurs vocaux par exemple.

De plus, 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.

Si cela est possible, 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 en-tê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.

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

De même, les logiciels pour non-voyants doivent pouvoir interpréter facilement les contenus disponibles.

Pour cela, chaque cellule à l’intérieur du tableau doit être identifiée et liée par ses en-têtes. Cela signifie qu'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. Cela permet ainsi au lecteur d’écran d’identifier le th en tant que « titre » de colonne.

Voici un exemple de 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 en-tê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’en-tête s’applique aux cellules de la ligne.
  • La cellule intitulée « Océans » est balisée comme un en-tête avec l'attribut scope="col". Elle s'applique aux en-têtes des lignes « Arctique», « Atlantique»… Ces en-tê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.

D'autres exemples de tableaux de données.

Tableaux contenant de nombreuses lignes

tableau avec des cellules fusionnées

Astuce NPS 6

  • Sélectionnez vos en-têtes de colonne (ou de ligne)

  • Puis cliquez sur la propriété "Table Cell Properties" dans la barre d'outils.

  • Dans la fenêtre qui s'affiche, pour la propriété "Cell Type", selectionnez "Header" (permet l’identification en tant qu’en-tête ou TH)

  • Pour la propriété SCOPE, sélectionnez "Col" (ou "Row")

Tableau de présentation

Dans ce cas, le tableau est utilisé pour présenter un contenu simple, sans aucun en-tê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.


Pour un tableau comme celui-ci, les propriétés du tableau de données ne doivent pas être utilisées : aucun caption, aucun en-tête. De cette manière, des en-têtes inutiles ne seront pas rappelés pour chaque cellule.

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

Dans le prochain article du rendez-vous accessibilité, nous aborderons la rédaction en langage clair.

Dernière mise à jour