# 08 — Zones tarifaires : données tabulaires en `<div>`

> **Item** : Accessible data tables — **required**
> **Verdict** : 🔴 **FAIL** · **Priorité : P3**
> **Effort estimé** : 2-3 h

## Constat

- `/tarifs` : 0 `<table>`, mais les prix y sont des cartes mono-valeur (« 80€ », « Personnalisé ») — pas de relation ligne/colonne, une table n'y est pas requise. OK.
- **`/zones-tarifaires`** : 0 `<table>`, alors que la page affiche des **données authentiquement tabulaires** — 30+ lignes de correspondance *zone tarifaire ↔ commune ↔ code postal* — construites en `<div class="table-row zone-1">` (la classe s'appelle littéralement `table-row`) avec 3 `<div>` enfants et une ligne d'en-tête factice.

Un lecteur d'écran lit une suite plate de fragments (« Zone 1 », « Yerres », « 91330 », « Zone 1 », « Brunoy »…) sans aucune relation annoncée : impossible de savoir quelle commune est dans quelle zone sans mémoriser la position — exactement ce que les en-têtes de table résolvent.

## Correctif

Remplacer la grille de divs par une vraie table :

```html
<table>
  <caption>Zones tarifaires par commune</caption>
  <thead>
    <tr>
      <th scope="col">Zone tarifaire</th>
      <th scope="col">Commune</th>
      <th scope="col">Code postal</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Zone 1</td>
      <th scope="row">Yerres</th>
      <td>91330</td>
    </tr>
    …
  </tbody>
</table>
```

- `<caption>` : titre de la table, annoncé à l'entrée (peut être visuellement stylé comme l'actuel titre de section).
- `<th scope="col">` sur chaque en-tête de colonne ; `<th scope="row">` sur la commune (la clé de lecture naturelle : « Yerres — zone 1 — 91330 »).
- Le CSS actuel se transpose (une table se style librement ; `display:block` sur mobile à éviter — préférer `overflow-x: auto` sur un conteneur).
- Si la liste est longue, un `<tfoot>` ou un découpage par zone avec plusieurs tables (une par zone, chacune avec caption) est acceptable.

Bonus cohérence : cette page est aussi la plus mince du site (~736 mots) et n'est liée que depuis `/tarifs` ([SEO issue 02](../../audit-seo/issues/02-maillage-interne.md)) — la refonte en table est l'occasion de l'étoffer et de la lier depuis les pages départements.

## Vérification

- `document.querySelectorAll('#zones table caption, #zones th[scope]').length > 0`.
- Lecteur d'écran, navigation par cellules (Ctrl+Alt+flèches avec VoiceOver) : chaque cellule annonce ses en-têtes de ligne et colonne.
- Mobile 375 px : la table défile horizontalement dans son conteneur sans casser la page.