====== 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. 
  * [[https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/|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 [[pratique:informatique:checklist:legal|légal]], mais on peut et on doit faire mieux, autant que possible. Mieux, c'est le [[https://www.w3.org/WAI/|WCAG]], qui évolue avec le web, mais qui est sacrément plus touffu aussi.

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.


{{tag>Web}}

[[https://creativecommons.org/publicdomain/zero/1.0/deed.fr|{{ https://liev.re/imagesweb/licences/cc-zero.png?100 | Ce texte est placé sous licence CC0}}]]