Réalisez des tableaux accessibles

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.

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 :

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 :

Dans l’exemple ci-dessus,

• les balises  colgroup  , utilisées avec la balise  col  , 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 :

1. 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 balise  h2  .

2. 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 balises  table  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 !