# 01 — Navigation clavier : burger `<div>` et méga-menu hover-only

> **Items** : Keyboard navigation — **required** · Native interactive elements — recommended
> **Verdict** : 🔴 **FAIL critique** · **Priorité : P1** — le défaut d'accessibilité le plus grave du site
> **Effort estimé** : 0,5-1 jour

## Constat

49 éléments focusables sur l'accueil (45 liens, 3 boutons — tous dans la bannière cookies, 1 div `tabindex="-1"` bénin de Gatsby). Aucun `tabindex` positif ✓. Mais **3 `<div>` porteuses de `onclick` ne sont ni focusables ni opérables au clavier** :

| Élément | Rôle réel | Gravité |
|---|---|---|
| **`.hTZVYc` — le burger menu mobile** | `display:none` par défaut, `display:flex` sous `@media (max-width:1024px)`. C'est **le seul moyen d'ouvrir la navigation** sous 1024 px — et c'est une `<div>` sans `role`, sans `tabindex`, sans handler clavier | 🔴 **Sous 1024 px, la navigation du site est totalement inutilisable au clavier** |
| **`.gFbpYk` — déclencheur du méga-menu « Présentation »** | Révèle les liens Hyménoptères / Chenilles processionnaires / Dératisation. Le panneau (`.icrWwq`) est en `visibility:hidden; opacity:0` avec **aucune règle `:focus` / `:focus-within`** — souris uniquement | 🔴 Les liens du sous-menu sont perdus pour les utilisateurs clavier |
| Wrapper image du hero | Décoratif | 🟡 Faible |

Contexte aggravant : sur un site d'urgence consulté majoritairement sur mobile, le breakpoint ≤ 1024 px couvre aussi les tablettes avec clavier et les utilisateurs de commande vocale (qui ciblent les éléments par leur rôle — une `<div>` n'en a pas).

## Correctif

### 1. Burger menu → vrai `<button>`

```html
<button type="button" aria-expanded="false" aria-controls="main-menu" class="burger">
  <span class="sr-only">Menu</span>
  <svg aria-hidden="true">…</svg>
</button>
<ul id="main-menu">…</ul>
```

- `<button>` natif = focusable, activable Entrée/Espace, rôle annoncé — gratuit, zéro JS clavier à écrire.
- Basculer `aria-expanded` à l'ouverture/fermeture ; le state React existant pilote l'attribut.

### 2. Méga-menu « Présentation » → disclosure accessible

Deux options :

**Option A — `<button aria-expanded>`** (comportement actuel conservé) : même pattern que le burger, avec en plus au clavier : Échap ferme et rend le focus au bouton.

**Option B — ouvrir au focus** : ajouter la règle CSS symétrique du hover :

```css
.nav-item:hover .icrWwq,
.nav-item:focus-within .icrWwq { visibility: visible; opacity: 1; }
```

L'option B est le patch minimal (1 règle CSS) ; l'option A est le fix propre. Faire B immédiatement, A dans la foulée.

### 3. Règle générale

Toute interaction pointeur doit avoir son équivalent clavier ; en pratique : **plus jamais de `onclick` sur une `<div>`** — un élément cliquable est un `<a href>` (navigation) ou un `<button>` (action). Le site n'a que 3 `<button>` (bannière cookies) : c'est le symptôme.

## Vérification

- Au clavier seul, viewport 375 px : Tab atteint le burger, Entrée ouvre le menu, tous les liens sont tabbables, Échap referme.
- Tab jusqu'à « Présentation » : le sous-menu apparaît (focus-within) ou s'ouvre via Entrée ; les 3 liens internes sont atteignables.
- `[...document.querySelectorAll('div,span')].filter(e=>e.onclick).length` → 0 (hors wrappers décoratifs neutralisés).
- Test lecteur d'écran : le burger est annoncé « Menu, bouton, réduit/déplié ».