Audit d'accessibilité

// Mal : image muette (lecteur d'écran ignore complètement)
<img src="/logo.png" />

// Bien : texte alternatif descriptif
<img src="/logo.png" alt="Logo BaliseTonSite" />

// Image décorative (pas de contenu utile) :
<img src="/decoration.svg" alt="" role="presentation" />

// Next.js Image :
import Image from 'next/image'
<Image src="/hero.webp" alt="Développeur devant son écran" width={800} height={400} />

// Mal : texte gris clair sur fond blanc (ratio < 4.5:1)
<p className="text-gray-300">Texte illisible</p>

// Bien : contraste suffisant (ratio >= 4.5:1 pour le texte normal)
<p className="text-gray-700">Texte lisible</p>

// Pour les grands titres (>= 18px bold), le ratio minimum est 3:1
<h1 className="text-gray-600 text-2xl font-bold">Titre visible</h1>

// Outil pour vérifier : https://webaim.org/resources/contrastchecker/

// Mal : input orphelin (le lecteur d'écran ne sait pas ce qu'il faut saisir)
<input type="email" placeholder="Ton email" />

// Bien : label explicitement lié
<label htmlFor="email">Adresse email</label>
<input id="email" type="email" placeholder="exemple@mail.com" />

// Avec className sr-only pour label visuellement caché mais accessible :
<label htmlFor="search" className="sr-only">Rechercher</label>
<input id="search" type="search" placeholder="Rechercher..." />

// Mal : div cliquable (pas focusable au clavier)
<div onClick={handleClick}>Cliquer ici</div>

// Bien : utiliser un vrai bouton
<button onClick={handleClick}>Cliquer ici</button>

// Si tu dois utiliser un div (rare), ajoute les attributs nécessaires :
<div
  role="button"
  tabIndex={0}
  onClick={handleClick}
  onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') handleClick() }}
>
  Cliquer ici
</div>

# Extension gratuite : axe DevTools par Deque
# 1. Installe l'extension Chrome
# 2. Ouvre DevTools > onglet "axe DevTools"
# 3. Clique "Scan ALL of my page"
# 4. Résultat : liste des violations avec gravité et solution

# Avantage : plus précis que Lighthouse pour l'accessibilité

# La checklist du test manuel en 5 minutes :
# 1. CLAVIER : navigue avec Tab/Shift+Tab. Tout est accessible ?
# 2. FOCUS : vois-tu toujours où tu es (outline visible) ?
# 3. ZOOM : zoome à 200%. Le contenu reste-t-il lisible ?
# 4. LECTEUR D'ÉCRAN : active le narrateur Windows (Win+Ctrl+Enter)
# 5. MOUVEMENT : prefers-reduced-motion respecté ?

// aria-label : quand il n'y a pas de texte visible
<button aria-label="Fermer la modale">
  <i className="fa-solid fa-xmark" />
</button>

// aria-hidden : cacher du contenu décoratif
<i className="fa-solid fa-star" aria-hidden="true" />

// aria-live : annoncer les changements dynamiques
<div aria-live="polite">
  {message && <p>{message}</p>}
</div>

// role="alert" : notification urgente
<div role="alert" className="text-red-500">
  Erreur : email invalide
</div>

/* Respecter la préférence utilisateur pour les animations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}