En HTML, et de façon générale, les tableaux sont utilisés pour organiser des données ayant des relations entre elles. On peut penser par exemple à des ingrédients et à leurs quantités et unités de mesure associés pour une recette de cuisine, ou alors à un tableau comparant des billets de train.
On peut créer un tableau en HTML avec la table
et ses balises associées ( th
, td
, tr
, etc.).
Dans ce chapitre, nous allons voir ensemble :
les mauvaises façons de faire un tableau et l’impact d’un tableau mal construit pour l’accessibilité ;
comment bien construire un tableau en donnant un sens de lecture à nos colonnes et à nos lignes ;
comment permettre aux technologies d’assistance de parcourir notre tableau.
Analysez un mauvais exemple de tableau
Pour démarrer cette section, on commence par un exemple de tableau extrait d’un site de recettes de cuisine.
![Tableau d'ingrédients à 2 colonnes : une colonne de quantités (1 cuillère à café, 2 cuillères à café, 4 pièces, etc) et une colonne d'ingrédients (Ail en poudre, crème fraiche, cuisse de canard confite, etc).](https://user.oc-static.com/upload/2020/07/16/15949183745801_image12.png)
Et ci-dessous, voici le code source de ce tableau qui ne respecte pas les bonnes pratiques :
<!-- Exemple d'un mauvais tableau -->
<div>
<div>
Ingrédients pour 4 personnes
</div>
<div>
<div></div>
<div>
<div>
1 cuillère à café
</div>
<div>
ail en poudre
</div>
</div>
<div></div>
<div>
<div>
2 cuillère à soupe
</div>
<div>
crème fraîche
</div>
</div>
<div></div>
<div>
<div>
4 piece
</div>
<div>
Cuisse de canard confite
</div>
</div>
</div>
</div>
Comme vous pouvez le constater, il est constitué essentiellement de div
, soit des balises n’ayant aucun sens sémantique.
Alors, quelles sont les conséquences de ce genre de tableau pour l’accessibilité ?
En premier lieu, ce tableau ne donne aucune information sur son contenu.
De plus, il ne donne aucune information quant au sens de lecture des éléments.
Bien que de moins en moins courant, car les développeurs sont de plus en plus informés sur l’accessibilité, on trouve encore ce type de tableau sur la toile, et notamment dans certaines librairies. Soyez averti !
Créez un tableau compréhensible pour tous vos publics
Maintenant que nous avons pu voir ce qu’il ne faut pas faire quand on souhaite réaliser des tableaux, nous allons aborder les bonnes pratiques !
Démarrez avec un tableau non accessible
Voici un meilleur exemple de tableau utilisant les tags thead
, tr
, th
, etc.
<table>
<caption>Passagers du vol 377</caption>
<thead> <!-- En-tête du tableau -->
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Pays</th>
</tr>
</thead>
<tfoot> <!-- Pied de tableau -->
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Pays</th>
</tr>
</tfoot>
<tbody> <!-- Corps du tableau -->
<tr>
<td>Carmen</td>
<td>33 ans</td>
<td>Espagne</td>
</tr>
<tr>
<td>Michelle</td>
<td>26 ans</td>
<td>États-Unis</td>
</tr>
<tr>
<td>François</td>
<td>43 ans</td>
<td>France</td>
</tr>
<tr>
<td>Martine</td>
<td>34 ans</td>
<td>France</td>
</tr>
<tr>
<td>Jonathan</td>
<td>13 ans</td>
<td>Australie</td>
</tr>
<tr>
<td>Xu</td>
<td>19 ans</td>
<td>Chine</td>
</tr>
</tbody>
</table>
Ce tableau utilise l’ensemble des balises conseillées dans la création d’un tableau.
Voici le résultat de ce code :
![Le tableau comporte un titre : Passagers du vol 377. Puis une ligne avec les noms des colonnes. Puis chaque ligne (Nom, puis age puis pays). Et enfin une nouvelle ligne avec les noms des colonnes.](https://user.oc-static.com/upload/2020/07/30/15961204326805_Screen%20Shot%202020-07-30%20at%2016.46.22.png)
Enrichissez votre tableau avec des attributs
En plus des balises liées à la création des tableaux, on notera que des attributs sont, eux aussi, spécifiques au tableau.
Le plus important à connaître est l’attribut scope
au sein des balises th
. Ce dernier permet de définir le sens de lecture des lignes composant notre tableau, où :
scope="row"
pour un sens de lecture horizontal ;scope="col"
pour un sens de lecture vertical.
<table>
<caption>Passagers du vol 377</caption>
<thead> <!-- En-tête du tableau -->
<tr>
<th scope="col">Nom</th>
<th scope="col">Âge</th>
<th scope="col">Pays</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Carmen</th>
<td>33 ans</td>
<td>Espagne</td>
</tr>
<!-- Le reste de notre tableau -->
</tbody>
</table>
Voici notre tableau qui utilise maintenant les attributs scope pour définir un sens de lecture.
Rendez un tableau complexe accessible
Nous avons vu dans la section précédente comment réaliser un tableau simple et accessible. Nous allons, dans cette section, nous attarder sur les tableaux complexes.
Voici un exemple de tableau regroupant des données plus complexes dans leur organisation.
<table>
<caption>Achats et ventes - 2019</caption>
<col>
<colgroup span="2"></colgroup>
<colgroup span="2"></colgroup>
<tr>
<td rowspan="2"></td>
<th colspan="2" scope="colgroup">Janvier</th>
<th colspan="2" scope="colgroup">Février</th>
</tr>
<tr>
<th scope="col">Achat</th>
<th scope="col">Vente</th>
<th scope="col">Achat</th>
<th scope="col">Vente</th>
</tr>
<tr>
<th scope="row">Thomas</th>
<td>50,000</td>
<td>30,000</td>
<td>100,000</td>
<td>80,000</td>
</tr>
<tr>
<th scope="row">Alexandra</th>
<td>10,000</td>
<td>5,000</td>
<td>12,000</td>
<td>9,000</td>
</tr>
</table>
Voici le résultat de ce code :
![Le tableau contient un titre : Achats et ventres - 2019. Puis une ligne avec les colonnes Janvier et Février. Et dans chaque colonne, à nouveau 2 colonnes : Achat et Vente. Puis les lignes de données avec en tête de ligne le prénom puis les données](https://user.oc-static.com/upload/2020/07/20/15952409741795_Screen%20Shot%202020-07-16%20at%2019.07.29.png)
Dans l’exemple ci-dessus,
les balises
colgroup
, utilisées avec la balisecol
, nous permettent de définir un groupe de colonnes au sein d’un tableau ;on indique le sens de lecture de ce dernier avec l’attribut
scope=colgroup
.
Pour conclure, essayez de garder vos tableaux les plus simples possible dans leur design. Ils vous demanderont moins de travail côté code, et seront plus facilement compréhensibles par vos utilisateurs.
Tonight In Gotham : Réalisez le tableau de l'emploi du temps de Batman
Ouvrons le fichier weekly-schedule.html
. Ce fichier contient le tableau présent sur les maquettes Figma.
Comme vous pouvez le constater, nous avons un tableau assez complexe, un emploi du temps, qui comprend :
deux niveaux de lecture. L’un vertical (jour par jour) et l’autre horizontal (heure par heure) ;
ces cases sont regroupées. Par exemple, la case “Lunch” court du lundi au vendredi.
Pour indiquer le sens de lecture, vous l’avez vu dans le cours plus haut, vous devez utiliser l’attribut scope avec le sens de la lecture. En l'occurrence, ici, j’utilise les attributs scope=”row”
et scope=”col”
pour préciser le sens.
Vous pouvez aussi constater l’utilisation de la balise caption
. Cette dernière n’est affichée que pour les screen readers (lecteurs d'écrans ; nous utilisons la classe CSS sr-only
pour masquer le texte aux utilisateurs).
Pour les cases regroupées, par exemple la case “Lunch” ou la case “Rock climbing”, nous utilisons les attributs colspan
et rowspan
. Ces attributs permettent d’augmenter le nombre de cellules, respectivement horizontalement et verticalement.
Notez que nous pourrions aller encore plus loin. En effet, si vous passez cette page dans un validateur, deux “warnings” vont vous être affichés :
Le premier concerne le niveau de titre. En effet, notre page n'utilise qu’une balise
h1
, et les bonnes pratiques recommandent que chaque page dispose aussi d’une baliseh2
.Le deuxième warning est en rapport avec le tableau. Le validateur d’accessibilité (que vous découvrirez dans le dernier chapitre de la deuxième partie) vous invite à renseigner les attributs
headers
etid
.
En effet, pour renforcer la compatibilité du projet avec les technologies d'assistance, vous pouvez en plus des scopes renseigner ces deux attributs. Cela vous permettra d’aller encore un peu plus loin dans le sens de lecture du tableau.
En résumé
L’utilisation de
div
imbriquées est à proscrire lorsque que vous créez un tableau. Les balisestable
et celles associées sont nécessaires à l’accessibilité.Pensez à utiliser une balise
caption
pour définir le sens et l’utilité du tableau.L’attribut
scope
permet de définir un sens de lecture à votre tableau.
Le prochain chapitre est lui aussi lié au contenu. Nous allons voir comment rendre vos contenus audio et vidéo accessibles. À tout de suite !