Accessibilité web en 20 minutes

Un site accessible est un site meilleur pour tout le monde.

Qui est concerné ?

Principe	Question
Perceptible	Peut-on voir ou entendre l'information ?
Utilisable	Peut-on agir au clavier, sans limite de temps ?
Compréhensible	Le contenu est-il clair et prévisible ?
Robuste	Fonctionne-t-il avec les aides techniques ?

html

<!-- ❌ -->
<div onclick="valider()">Valider</div>

<!-- ✅ -->
<button type="button">Valider</button>

Un vrai button gère déjà le clavier, le focus et le rôle.

html

<img src="graphique.png" alt="Courbe des visites : +40 % en un an">
<img src="decor.svg" alt="">

Première règle : n'utilisez pas ARIA si un élément HTML natif suffit.

Utile quand il n'y a pas d'équivalent :

css

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

Respectez les préférences du système.