Un tableau HTML techniquement correct, avec ses <th> bien en place et son scope="col" renseigné, peut malgré tout devenir difficile à consulter dès que le nombre de colonnes dépasse ce qu’un écran peut afficher sans défilement horizontal : c’est exactement ce qui s’est produit sur la page comparative de garanties d’un assureur habitation, avec huit formules de contrat affichées côte à côte.
Le tableau comparait huit colonnes de garanties (dégât des eaux, incendie, vol, catastrophe naturelle, bris de glace, responsabilité civile, protection juridique, assistance) pour trois niveaux de contrat. Sur un écran de bureau large, la lecture restait possible, mais sur un écran plus étroit ou avec un zoom important pour un utilisateur malvoyant, le défilement horizontal rendait la comparaison presque impossible à suivre.
Le tableau d’origine, techniquement correct mais peu praticable
<table>
<thead>
<tr>
<th scope="col">Garantie</th>
<th scope="col">Essentiel</th>
<th scope="col">Confort</th>
<th scope="col">Sérénité</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dégât des eaux</td>
<td>Inclus</td>
<td>Inclus</td>
<td>Inclus + franchise réduite</td>
</tr>
</tbody>
</table>
Ce tableau respecte les critères d’accessibilité classiques d’un tableau de données : en-têtes correctement déclarés, association implicite entre chaque cellule et son en-tête de colonne. Le problème ne relève pas du balisage, mais de la densité d’information imposée par un format tabulaire au-delà d’un certain nombre de colonnes.
La transformation en cartes, une par formule
Plutôt que de forcer un défilement horizontal ou de réduire la taille du texte pour faire tenir huit colonnes, la solution retenue transforme la présentation en une carte par formule de contrat, chaque garantie devenant une ligne au sein de sa carte, avec le libellé de la garantie répété systématiquement.
<h3>Formule Confort</h3>
<dl>
<dt>Dégât des eaux</dt>
<dd>Inclus</dd>
<dt>Incendie</dt>
<dd>Inclus</dd>
<dt>Assistance</dt>
<dd>Non incluse</dd>
</dl>
La liste de définitions, avec un <dt> pour chaque garantie suivi de son <dd> correspondant, garantit qu’un lecteur d’écran annonce toujours le nom de la garantie juste avant sa valeur, sans avoir à retenir une position de colonne comme dans un tableau large.
Ce que cette transformation conserve et ce qu’elle change
- Le contenu informatif reste strictement identique : les mêmes huit garanties, les mêmes trois formules, les mêmes libellés.
- La comparaison directe entre deux formules devient légèrement plus longue à effectuer visuellement, un compromis assumé au profit de la lisibilité individuelle de chaque formule.
- Le tableau original reste conservé et affiché uniquement à partir d’une largeur d’écran suffisante, la bascule en cartes s’activant sous un certain seuil, géré en CSS par requête média.
Un tableau de synthèse conservé en complément
Pour ne pas sacrifier totalement la comparaison rapide entre formules, un second tableau simplifié, réduit à trois garanties jugées prioritaires par les retours clients (dégât des eaux, incendie, assistance), reste affiché sous forme de tableau classique même sur petit écran, les cinq autres garanties étant reléguées aux cartes détaillées accessibles par un lien « Voir le détail complet ».
Pourquoi ne pas simplement réduire la taille du texte
Réduire la taille du texte pour faire tenir huit colonnes aurait résolu le problème de largeur au prix d’un nouveau problème de lisibilité pour les utilisateurs malvoyants, exactement le public que cette page comparative cherchait à ne pas exclure. La bascule en cartes évite ce compromis en changeant la structure plutôt que la taille du texte.
Un tableau bien balisé n’est un bon choix que jusqu’à un certain nombre de colonnes ; au-delà, la structure elle-même doit changer, pas seulement sa mise en forme.
En résumé
Huit colonnes de garanties, condensées à l’origine dans un tableau techniquement correct mais peu praticable au-delà d’une certaine largeur d’écran, ont été réorganisées en cartes par formule avec des listes de définitions qui répètent chaque libellé de garantie. Cette transformation, complétée par un tableau de synthèse réduit à trois garanties prioritaires, conserve l’intégralité de l’information tout en la rendant lisible quel que soit l’appareil ou le niveau de zoom utilisé.
