Checklist de l'accessibilité des sites web

La référence française reste le RGAA et malgré l'aspect peu engageant, en réalité le test est bien fait et relativement facile à suivre.

• Critères et tests du référentiel général d’amélioration de l’accessibilité

MAIS attention ! Le RGAA v4 est une version “au rabais” pour les personnes handicapées : c'est donc une base, et “suffisante” d'un point de vu légal, mais on peut et on doit faire mieux, autant que possible. Mieux, c'est le WCAG, qui évolue avec le web, mais qui est sacrément plus touffu aussi. Il y a des versions françaises traduites officiellement (lien vers celle du 17/03/2025).

La page https://khaganat.net/wikhan/fr:accessibilite détaille plus d'infos pour arriver vers de l'accessibilité.

Bref, déjà pour faire le minimum :

• Navigation et interaction (clavier, souris, écran tactile)
  • Le site est navigable au clavier. Tous les liens et boutons sont accessibles au clavier
  • Le focus est visible et bien contrasté : on voit où se trouve le curseur quand on navigue au clavier.
  • Il n'y a pas de piège clavier (ex. : impossible de sortir d’une modale)
  • Les éléments interactifs sont suffisamment grands pour être cliquables facilement
  • Le focus ne disparaît jamais ou ne saute pas de manière imprévisible
  • Les actions par glissement ou pression prolongée ont une alternative simple (ex. : bouton classique)

• Contenus et textes
  • Les textes sont lisibles et contrasté.
  • Le texte peut être agrandi à 200 % sans casser la mise en page.
  • Les abréviations et sigles sont expliqués si nécessaire.
  • Aucun contenu ne disparaît après un certain temps sans possibilité de pause

• Images et médias
  • Toutes les images importantes ont un texte alternatif (alt)
  • Les images purement décoratives ont un alt=“” ou role=“presentation”.
  • Les vidéos ont des sous-titres synchronisés.
  • Les contenus audio ont une transcription textuelle.
  • Les animations ou clignotements de plus de 5 secondes peuvent être mis en pause.

• Formulaires et interactions
  • Chaque champ de formulaire a un label clair (<label for=“id”>)
  • Les éléments interactifs sont accessibles sans double interaction (drag & drop, maintien appuyé, etc.)
  • Les champs de saisie d'informations personnelles proposent un auto-remplissage correct
  • Les erreurs sont bien signalées et expliquées avec un texte.
  • Un message de confirmation apparaît après soumission d’un formulaire.
  • Les champs obligatoires sont indiqués clairement.

• Contraste et couleurs
  • Les couleurs respectent un ratio de contraste d’au moins 4.5:1 pour le texte.
  • Les éléments interactifs ont un bon contraste avec leur fond.
  • Les couleurs ne sont pas le seul moyen de transmettre une information. On double toujours avec une forme ou du texte.

• Accessibilité technique (pour les devs)
  • Le HTML est bien structuré : pas de <div> inutiles, utilisation correcte des rôles ARIA, usage des balises sémantiques html qui décrivent le contenu (h1, menu, etc.). Les titres (<h1>, <h2>, <h3>, etc.) suivent un ordre logique
  • Les attributs aria-label ou aria-labelledby sont utilisés quand nécessaire.
  • Les changements dynamiques sont annoncés aux lecteurs d’écran (aria-live).
  • Les iframes ont un titre explicite (`title=“Description du contenu”`). Se passer d'iframes est mieux…
  • Le temps limite d’une action peut être ajusté par l’utilisateur.