PD-230 — Rétrospective¶

1. Contexte¶

2. Métriques¶

3. Learnings clés¶

• Accessibilité ne s'ajoute pas à la fin : Les patterns ARIA (aria-label, aria-expanded) doivent être pensés dès la conception du composant.

• Outils automatisés sont indispensables : Sans eslint a11y et pa11y-ci, les violations WCAG passent inaperçues jusqu'aux plaintes utilisateurs.

• Skip link est fondamental : C'est la première chose qu'un utilisateur clavier rencontre. Son absence dégrade significativement l'expérience.

• Focus visible ne suffit pas : Avoir un outline ne garantit pas une navigation clavier fluide. L'ordre de tabulation et les landmarks comptent aussi.

• Vérifier compatibilité des outils avec le framework : eslint-plugin-jsx-a11y est conçu pour React/JSX, pas pour Astro. Toujours tester un plugin sur un fichier réel.

4. Patterns applicables¶

Nouveau pattern : html-validate pour Astro (au lieu de jsx-a11y)¶

{
  "extends": ["html-validate:a11y"],
  "rules": {
    "no-inline-style": "off"
  }
}

Nouveau pattern : SkipLink Astro accessible¶

---
const { href = '#main-content', label } = Astro.props;
---
<a href={href} class="skip-link">{label}</a>

<style>
.skip-link {
  position: absolute;
  left: -10000px;
}
.skip-link:focus {
  left: 0;
  top: 0;
  z-index: 9999;
}
</style>

5. Signal CLAUDE.md¶

Priorité haute : Outillage a11y dès le départ.

### Accessibilité — Outillage obligatoire (2026-02-XX)

Pour tout projet front-end :
1. **html-validate** avec preset `a11y` (Astro, HTML statique)
2. **pa11y-ci** avec configuration `.pa11yci.json` (pas JS en ESM)
3. **SkipLink** comme premier composant du layout
4. **id="main-content"** sur la balise `<main>`

Installer AVANT d'écrire le premier composant.

6. Conclusion¶

PD-230 a établi la conformité WCAG 2.1 AA après correction de 3 écarts. L'adaptation des outils (html-validate au lieu de jsx-a11y, .pa11yci.json au lieu de JS) illustre l'importance de tester la compatibilité avec le framework. Les 103 erreurs de contraste détectées sont documentées pour un ticket dédié.

Rétrospective générée 2026-02-19 (Étape 10 batch site-vitrine)