# 06 — Landmarks mal imbriqués + absence de skip link

> **Items** : Semantic HTML and landmarks — **required** · Skip links — **required** · ARIA usage — recommended
> **Verdict** : 🔴 **FAIL** (les deux) · **Priorité : P2**
> **Effort estimé** : 0,5 jour (restructuration du layout)

## Constat 1 — Landmarks : banner et footer neutralisés par l'imbrication

Arbre constaté (identique accueil et pages villes) :

```
NAV                                    ← seule nav, non labellisée (toléré : unique)
└─ div wrapper
   └─ MAIN [role="main" aria-label="Contenu principal"]   ← role redondant sur <main> natif
      ├─ DIV [role="banner"]           ← ✗ imbriqué DANS <main>
      ├─ SECTION (générique, sans nom accessible → pas un landmark)
      └─ FOOTER                        ← ✗ imbriqué DANS <main>
```

Le mapping `header→banner` et `footer→contentinfo` ne s'applique **que hors de `main`/`article`/`section`/`nav`/`aside`** : imbriqués ici, le bandeau et le footer **perdent leur statut de landmark** et deviennent des régions génériques. Un utilisateur de lecteur d'écran qui navigue par landmarks (raccourci D / rotor) ne voit ni banner ni contentinfo — juste nav et un énorme main.

Défauts ARIA associés : `role="main"` redondant sur `<main>` natif ; `role="banner"` posé sur une `<div>` au lieu d'un `<header>` natif. Point positif : `aria-hidden` n'est jamais posé sur un élément focusable ✓, les 9 `role="presentation"` sont sur du décoratif ✓.

## Constat 2 — Aucun skip link

0 lien interne `href^="#"` sur tout le site. Le premier élément focusable est le logo. Un utilisateur clavier doit traverser toute la navigation (et sur les pages villes, potentiellement des dizaines de liens) avant d'atteindre le contenu, **sur chaque page**.

## Correctif

### Structure cible

```html
<body>
  <a class="skip-link" href="#main">Aller au contenu principal</a>
  <header>            <!-- l'actuel div[role=banner], sorti de main -->
    <nav>…</nav>
  </header>
  <main id="main" tabindex="-1">   <!-- sans role redondant -->
    …contenu…
  </main>
  <footer>…</footer>  <!-- sorti de main -->
</body>
```

### Skip link — pattern complet

```css
.skip-link {
  position: absolute;
  left: -9999px;               /* jamais display:none — il doit rester focusable */
}
.skip-link:focus {
  left: 1rem; top: 1rem;
  z-index: 1000;
  background: #fff; color: #1a1a1a;
  padding: .75rem 1.25rem;
  outline: 2px solid #e6332a;
}
```

- Premier enfant de `<body>`, avant tout.
- `tabindex="-1"` sur `<main>` pour que le focus s'y pose au clic du lien.
- Libellé en français (« Aller au contenu principal ») — cohérent avec `lang="fr"`.

### Nettoyage ARIA (même geste)

- Supprimer `role="main"` et `aria-label="Contenu principal"` (le nom d'un main unique n'apporte rien).
- Remplacer `div[role="banner"]` par `<header>` natif.
- Donner un nom à la `<section>` si elle doit être un landmark (`aria-labelledby` vers son heading), sinon la laisser en `<div>`.

## Vérification

- Rotor/raccourcis lecteur d'écran : landmarks annoncés = banner, navigation, main, contentinfo — chacun une fois.
- Premier Tab sur chaque page : le skip link apparaît ; Entrée déplace le focus dans `<main>` (vérifier `document.activeElement`).
- `document.querySelectorAll('main [role="banner"], main footer').length === 0`.