Leçon 12 / 20

Contrôler la lisibilité du tableau

12 min HTML5 — sémantique, tableaux et formulaires Gratuit

Objectif : Vérifier que chaque tarif peut être compris à partir de ses en-têtes.

Un tableau de tarifs peut être correctement balisé et pourtant rester difficile à lire. Une cellule contenant « 35 » ne précise pas, à elle seule, s’il s’agit d’un prix, d’une durée ou d’un nombre de participants. Vous allez contrôler que les intitulés, les associations entre en-têtes et cellules et les unités rendent chaque offre compréhensible.

Vérifier les associations entre en-têtes et cellules

Dans la leçon précédente, vous avez distingué les en-têtes des cellules de données avec th et td, puis indiqué leur portée avec scope. Vous pouvez maintenant vérifier le résultat du point de vue d’une personne qui découvre le tableau : pour chaque donnée, demandez-vous quelle formule elle concerne et quel critère la décrit.

Dans votre tableau, les trois en-têtes de colonne sont « Formule », « Durée » et « Tarif ». Ils portent chacun scope="col" : les cellules situées dessous se lisent selon ces critères. Dans le corps du tableau, « Découverte » et « Complète » sont des en-têtes de ligne avec scope="row" ; ils permettent d’identifier l’offre à laquelle correspondent la durée et le prix de la même ligne.

  • Pour une colonne, partez de son intitulé et vérifiez que toutes les valeurs dessous répondent bien au même critère.
  • Pour une ligne, partez du nom de la formule et vérifiez que les cellules suivantes décrivent cette formule, et non l’offre voisine.
  • Pour chaque tarif, formulez une phrase complète : « La formule Découverte dure deux heures et coûte 35 € par participant. »

Cette lecture permet de repérer une cellule décalée, un en-tête de colonne trop général ou un nom de formule placé dans une cellule de données. Elle vous aide aussi à vérifier qu’une personne utilisant une technologie d’assistance peut retrouver les mêmes relations grâce aux en-têtes correctement déclarés, sans dépendre uniquement de la position visuelle des cellules.

Rendre les intitulés et les tarifs précis

Un intitulé doit annoncer la nature des valeurs qu’il couvre. « Tarif » est utile ici parce que la légende du tableau précise déjà « Tarifs par participant, en euros ». Ensemble, ces informations indiquent qu’une valeur comme « 35 € » est un prix par personne, et non le coût total de la réservation ou un montant dans une autre devise.

Contrôlez la cohérence entre l’intitulé, la légende et les valeurs. Si les prix sont exprimés par participant, gardez cette règle pour toutes les formules ; n’inscrivez pas un prix global dans une seule ligne sans l’indiquer clairement. De même, présentez les durées avec une unité compréhensible, comme « Deux heures » et « Trois heures », plutôt qu’avec des nombres isolés dont le sens pourrait être incertain.

Effectuer une revue de lecture

Relisez d’abord la légende seule : elle doit préciser le sujet du tableau et, si nécessaire, l’unité ou la base de calcul. Parcourez ensuite les en-têtes, puis chaque ligne en reliant le nom de la formule à sa durée et à son tarif. Enfin, vérifiez que les intitulés restent explicites lorsqu’ils sont lus indépendamment du style visuel de la page.

  • Vérifiez qu’un en-tête de colonne décrit bien toutes les cellules qui le suivent.
  • Reliez chaque offre à ses données grâce à son en-tête de ligne.
  • Rendez explicites la nature du tarif, la devise et la base de calcul.
  • Présentez les durées et les montants selon des conventions cohérentes.

Dans la prochaine leçon, vous commencerez à associer chaque champ du formulaire d’inscription à un libellé visible.

Envie d'aller plus loin ?

Les cours Enovatic sont gratuits et le resteront. Si vous cherchez un accompagnement encadré, nos formations professionnelles sont animées par les mêmes formateurs.