L’accessibilité dès le départ

01Privilégier les éléments natifs

Les boutons gèrent déjà l’activation au clavier et les liens la navigation. Un div cliquable ne possède pas automatiquement ces comportements.

<button type="button">Show details</button>
<a href="services.html">Explore services</a>

02Garder le focus visible

Parcourez la page avec la touche Tab. Chaque élément interactif doit afficher un indicateur de focus visible. Ne supprimez pas les contours sans proposer une alternative aussi claire.

a:focus-visible, button:focus-visible {
  outline: 3px solid #2f5bea;
  outline-offset: 4px;
}

03Vérifier toute l’expérience

Utilisez des titres explicites, un contraste lisible, des textes alt utiles et des libellés clairs. Ne comptez pas uniquement sur la couleur. Testez le clavier, le zoom et respectez la préférence de réduction des animations.

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .animated-card { animation: none; }
}

04À vous de jouer

Utilisez Tab et Entrée pour ouvrir les détails. Observez l’indicateur de focus.

Pour aller plus loin

Consultez les guides MDN et standard HTML Living Standard pour approfondir et connaître les bonnes pratiques des navigateurs actuels.