# Rendre accessible un tableau tarifaire sans perdre sa mise en forme

> Une grille tarifaire d'assurance avec plusieurs formules côte à côte peut garder son habillage visuel tout en associant correctement chaque en-tête de colonne et de ligne.

- Auteur : WordPress Développement
- Publié le : 2021-09-03
- Mis à jour le : 2021-09-03
- Catégorie : Accessibilité
- URL : https://www.wpmoderne.fr/accessibilite/tableau-tarifaire-assurance-accessible/

## L’essentiel

- Chaque formule occupe une colonne avec son propre en-tête
- scope=col et scope=row relient chaque cellule à son en-tête
- Le CSS habille le tableau sans changer sa structure sémantique

Une grille tarifaire d'assurance présente en général trois ou quatre formules côte à côte (essentielle, confort, premium) avec une série de garanties en lignes : responsabilité civile, assistance, protection juridique. Visuellement, ce tableau ressemble souvent à une série de cartes plutôt qu'à un tableau classique, avec une formule mise en avant par une couleur ou une bordure. Le problème apparaît quand cette mise en forme pousse à construire la grille avec des `<div>` plutôt qu'avec un vrai `<table>`, ce qui casse tout lien entre une garantie et la formule qui la couvre.

## Pourquoi le tableau reste la bonne structure

Même quand le rendu visuel s'éloigne d'un tableau classique à lignes et colonnes grises, la relation entre les données reste tabulaire : chaque cellule répond à la question « cette garantie, dans cette formule, est-elle incluse et à quel niveau ? ». C'est exactement ce que le `<table>` HTML permet d'exprimer, à condition d'associer correctement chaque cellule à ses deux en-têtes (la garantie en ligne, la formule en colonne).

> L'essentiel à retenir : Chaque formule occupe une colonne avec son propre en-tête ; scope=col et scope=row relient chaque cellule à son en-tête ; Le CSS habille le tableau sans changer sa structure sémantique

## Le balisage avec scope de colonne et de ligne

Voici la structure que j'utilise pour ce type de grille, avec les attributs `scope` qui relient chaque cellule à son en-tête de ligne et de colonne :

```
<table>
  <thead>
    <tr>
      <th scope="col">Garantie</th>
      <th scope="col">Essentielle</th>
      <th scope="col">Confort</th>
      <th scope="col">Premium</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Responsabilité civile</th>
      <td>Incluse</td>
      <td>Incluse</td>
      <td>Incluse</td>
    </tr>
    <tr>
      <th scope="row">Assistance 0 km</th>
      <td>Non incluse</td>
      <td>Incluse</td>
      <td>Incluse</td>
    </tr>
    <tr>
      <th scope="row">Protection juridique</th>
      <td>Non incluse</td>
      <td>Non incluse</td>
      <td>Incluse</td>
    </tr>
  </tbody>
</table>
```

Avec cette structure, un lecteur d'écran annonce, pour chaque cellule parcourue, la garantie concernée et la formule correspondante : « Protection juridique, colonne Premium, incluse ». C'est cette double association que perd un tableau construit uniquement en `<div>` disposées en grille CSS.

## Garder l'habillage visuel voulu

Rien n'empêche d'habiller ce tableau sémantique pour lui donner l'apparence de cartes côte à côte : mettre en avant la colonne « Confort » avec une bordure colorée, arrondir les angles, ajouter une étiquette « Recommandée » au-dessus de sa colonne. Le CSS opère sur la structure existante sans avoir besoin de revenir à des `<div>` :

```
table {
  border-collapse: separate;
  border-spacing: 8px 0;
}
th[scope="col"]:nth-child(3) {
  background: #eef4ff;
  border: 2px solid #1a56db;
  border-radius: 8px;
}
```

La mise en forme reste entièrement du ressort du CSS, appliqué sur des sélecteurs de position ou de classe, sans jamais avoir besoin de renoncer à la structure de tableau pour obtenir ce rendu.

### Le cas des icônes de validation

Beaucoup de grilles tarifaires remplacent le texte « Incluse » par une simple coche colorée. Cette coche doit rester accompagnée d'un texte, même masqué visuellement, pour que la cellule continue de porter une information exploitable par un lecteur d'écran : une coche seule, sans alternative textuelle, équivaut à une cellule vide pour la technologie d'assistance.

> Sur les grilles tarifaires que j'ai reprises, l'erreur la plus fréquente reste le remplacement du `<table>` par une disposition en `<div>` flexbox : la mise en forme obtenue est identique à l'écran, mais toute la relation entre garantie et formule disparaît pour qui n'utilise pas la souris.

### Le cas d'un tableau qui défile horizontalement sur mobile

Sur un écran étroit, une grille tarifaire à quatre colonnes dépasse souvent la largeur disponible. Plutôt que de masquer des colonnes ou de transformer le tableau en une liste de cartes empilées qui perdrait sa structure, un conteneur avec défilement horizontal reste la solution la plus simple à condition qu'il soit lui-même repérable au clavier :

```
<div tabindex="0" role="region" aria-label="Tableau des garanties par formule">
  <table>...</table>
</div>
```

Le `tabindex="0"` permet d'atteindre ce conteneur au clavier pour le faire défiler avec les flèches, et le `role="region"` associé à un `aria-label` donne un repère clair à la zone pour une personne qui navigue par landmarks.

## En résumé

Un tableau tarifaire garde toute sa liberté de mise en forme visuelle tant que sa structure reste un vrai `<table>` avec des en-têtes de ligne et de colonne correctement déclarés par `scope`. Le CSS habille cette structure, y compris sur un écran étroit avec un conteneur de défilement repérable au clavier, sans jamais avoir besoin de la remplacer par des conteneurs génériques qui perdent la relation entre chaque garantie et sa formule.