Liste de vérification

Les listes de vérification proposées dans cette rubrique permettent de corriger les erreurs les plus fréquentes. Ce n'est qu'un fois que toutes les rubriques de ces listes auront été validées qu'un audit complet du site selon le Référentiel Général d'Amélioration de l'Accessibilité pourra être réalisé.

Un premier test simple

Le premier test à réaliser est assez simple : mettez votre souris de côté et naviguez dans vos pages en utilisant uniquement les touches du clavier. Si vous ne savez pas où vous vous trouvez dans la page ou si vous parvenez pas à afficher ou à accéder au contenu, votre site n’est pas accessible !

Mini-liste de vérification

Liste de 45 items répartis en 12 thématiques à vérifier sur ses pages.
Thématiques	Critères	Cochez si validé
Structrure HTML
	Déclarer un doctype valide.
	Déclarer toujours la langue de traitement sur la balise `html`.
	Valider le code source.
	Structurer votre page avec les régions ARIA.
	Si le site est en HTML5, structurer la page avec les balises HTML5 et les régions ARIA.
Navigation
	Définir des titres de pages pertinents.
	Implémenter un lien d'accès rapide au contenu.
	Implémenter un lien d'accès rapide à la navigation principale.
	Implémenter des liens d'évitement (accès rapide) pour tous les groupes de liens importants.
	Implémenter deux systèmes de navigation au moins.
Contenus
	Donner un titre pertinent aux cadres en ligne.
	Utiliser les balises appropriées pour structurer les listes.
	Indiquer les changements de langue et de sens de lecture.
	Indiquer les ouvertures de nouvelles fenêtres.
	Indiquer le format et le poids des documents en téléchargements.
Tableaux
	Implémenter le `role="presentation"` sur les tableaux de mise en forme.
	Déclarer les cellules d'en-têtes dans des éléments `th`.
	Implémenter un attribut `scope="col"` pour les en-têtes de colonnes.
	Implémenter un attribut `scope="row"` pour les en-têtes de lignes.
	Utiliser les relations `id`, `headers` pour relier les cellules de données à leurs en-têtes dans le cas de cellules fusionnées.
Liens
	Attention aux liens vides.
	Définir des intitulés de liens pertinents.
	Respecter la construction des titres de liens.
Formulaires
	Définir des étiquettes pertinentes.
	Utiliser une méthode conforme pour relier les champs à leurs étiquettes respectives.
	Pour les champs obligatoires avec un format de saisie, pensez toujours à l'indiquer (de préférence dans l'étiquette du champ).
	Pour les erreurs de saisie, reliez l'erreur au champ concerné et indiquez un exemple de saisie réelle lorsque nécessaire.
Focus
	La prise de focus est visible, les valeurs de l'outline ne la dégradent pas.
	Une mise en forme autre que la couleur permet d'identifier les liens ainsi que leur survol et la prise de focus.
	Lors de la navigation au clavier la prise de focus est cohérente et ne reste pas bloquée sur un élément (piège au clavier).
Distinction forme et fond
	Aucun contenu ne disparaît lors de l'activation ou de la désactivation des styles.
	La page reste compréhensible et les différentes zones sont correctement ordonnées lorsque les styles sont désactivés.
Images
	Définir un `alt` sur toutes les images `img`.
	Définir un `alt=""` sur les images de décoration.
	Définir une alternative conforme et pertinente lorsqu'elle est porteuse d'information.
	Éviter le plus possibles les images textes
Informations par la forme et la couleur
	Ne pas donner d'informations uniquement par la couleur.
	Ne pas donner d'informations uniquement par la forme.
	Implémenter des alternatives à la couleur et à la forme qui soient pertinentes.
Agrandissement des caractères
	Ne pas définir des tailles de caractères en pixels.
	Eviter de fixer des hauteurs de boîte en pixels.
	Utiliser la propriété overflow:hidden avec précaution.
	Définir si possible des points de rupture en em.
Multimédia
	Faire précéder toutes les vidéos d'un titre.
	Fournir un lien clairement identifié permettant d'accéder à l'alternative accessible des médias audios et vidéos.

Quelques extensions de vérification automatique

Les extensions de navigateur proposés ici ne permettent pas de répérer toutes les erreurs et non conformité en matière d’accessibilité. Pour autant, s’ils remontent des erreurs, c’est qu’il y a des choses à corriger !

Extension « Lighthouse »
Extension « Tanaguru webext RGAA »

Assistant RGAA

Cette extension, développée par la société Empreinte digitale, propose une liste complète des tests du référentiel RGAA. Pour chacun de ces tests, l’extension permet d’appliquer des modifications à la page courante (modifications de style, ajout d’informations, outils), permettant d’effectuer plus simplement les tests.