# 03 — Photos de contenu masquées aux lecteurs d'écran

> **Item** : Image alt text — **required**
> **Verdict** : 🔴 **FAIL** (pattern systématique, pas des cas isolés) · **Priorité : P1**
> **Effort estimé** : 0,5 jour (fix composant) + passe éditoriale sur les alt

## Constat

Tous les `<img>` ont un attribut `alt` (aucun manquant — bien), mais le composant d'images applique **`alt=""` + `aria-hidden="true"` en masse, y compris sur de vraies photos de contenu** :

- Accueil : 31 images, **20 en `alt="" aria-hidden="true"`** — dont la photo 800×600 de la section « Le danger et les conséquences sur l'homme » : un **nid de guêpes actif avec guêpes visibles**, image pleinement informative, totalement invisible pour un lecteur d'écran.
- `/galerie` : 16 images, **10 masquées** — les photos des catégories (nid de guêpes, chenilles processionnaires, dératisation, ruche d'abeilles) sont précisément le contenu de la page… et sont retirées de l'arbre d'accessibilité.
- Le pattern vient du composant d'images Gatsby (paires placeholder flou + image pleine résolution) : **les deux couches** sont masquées, alors que seul le placeholder devrait l'être.

Point positif : aucune image en `alt=""` ne constitue un lien vide (les liens concernés portent tous du texte par ailleurs).

## Impact

- Un utilisateur de lecteur d'écran sur la page galerie n'a… aucune galerie. Sur les pages de contenu, les preuves visuelles (nids, insectes, interventions) disparaissent.
- Ces images sont aussi perdues pour Google Images et pour les agents IA — sur des requêtes visuelles très naturelles pour ce métier (« à quoi ressemble un nid de frelons asiatiques »).

## Correctif

1. **Dans le composant image** : différencier les deux couches —
   - placeholder flou : `alt="" aria-hidden="true"` (correct, il est purement technique) ;
   - image principale : `alt` **obligatoire passé en prop**, jamais `aria-hidden`.
2. **Passe éditoriale** sur les images de contenu — un alt descriptif et spécifique :
   - `alt="Nid de guêpes actif accroché sous une toiture, guêpes visibles"`
   - `alt="Chenilles processionnaires du pin en procession sur un tronc"`
   - `alt="Technicien ABC Guêpes en combinaison retirant un nid de frelons"`
3. **Garder `alt=""`** (sans `aria-hidden`, redondant mais toléré) uniquement pour le réellement décoratif : icônes d'ornement, arrière-plans.
4. Règle de tri en cas de doute : *si l'image disparaissait, un texte devrait-il la remplacer ?* Oui → alt descriptif ; non → `alt=""`.

## Vérification

```js
// Sur chaque page clé : aucune image > 300px de large masquée
[...document.querySelectorAll('img')]
  .filter(i => i.naturalWidth > 300 && (i.alt === '' || i.closest('[aria-hidden="true"]')))
  .map(i => i.src)   // attendu : [] (hors placeholders)
```
- Lecteur d'écran sur `/galerie` : chaque photo annoncée avec sa description.
- Les alt ne commencent ni par « image de » ni par « photo de » (le rôle est déjà annoncé).