Images
2 critères NC
1.2
Chaque image de décoration est-elle correctement ignorée par les technologies d'assistance ?
Les images décoratives (
img, svg, pseudo-éléments CSS) doivent avoir alt="" et/ou aria-hidden="true".
1.8
Chaque image texte porteuse d'information, en l'absence d'un mécanisme de remplacement, est-elle remplacée par du texte stylé ?
Remplacer les images-texte par du texte HTML avec CSS. Exception : logos et textes dont l'apparence est essentielle.
Couleurs
3 critères NC
3.1
Dans chaque page web, l'information ne doit pas être donnée uniquement par la couleur.
Doubler toute information colorée d'un indicateur graphique (icône, motif, texte, soulignement…).
3.2
Le contraste entre la couleur du texte et son arrière-plan est-il suffisamment élevé ?
Ratio minimum : 4.5:1 pour le texte normal, 3:1 pour le grand texte (≥ 18 pt ou ≥ 14 pt gras).
3.3
Les couleurs utilisées dans les composants d'interface ou les éléments porteurs d'informations sont-elles suffisamment contrastées ?
Ratio minimum de 3:1 pour les composants d'interface (boutons, champs de formulaire, icônes fonctionnelles…).
Liens
2 critères NC
6.1
Chaque lien est-il explicite ?
L'intitulé de chaque lien (texte visible + alternative) doit permettre de comprendre sa destination ou sa fonction, seul ou avec le contexte du lien.
6.2
Dans chaque page web, chaque lien a-t-il un intitulé ?
Tout lien doit avoir un intitulé non vide (texte visible,
aria-label, title, ou alternative d'image).Script
1 critère NC
7.1
Chaque script est-il, si nécessaire, compatible avec les technologies d'assistance ?
Les composants JavaScript interactifs (modales, onglets, menus, accordéons…) doivent respecter les motifs ARIA (rôles, états, propriétés, gestion du focus et du clavier).
Éléments obligatoires
1 critère NC
8.6
Pour chaque page web ayant un titre de page, ce titre est-il pertinent ?
Le contenu de la balise
<title> doit être pertinent, unique et refléter le contenu/la fonction de la page.Structuration de l'information
4 critères NC
9.1
Dans chaque page web, l'information est-elle structurée par l'utilisation appropriée de titres ?
Les niveaux de titres (
h1–h6) doivent être logiquement hiérarchisés et refléter la structure réelle du contenu.
9.2
Dans chaque page web, la structure du document est-elle cohérente ?
Le document doit contenir au moins un
<main>, et les zones <header>, <nav>, <footer> doivent être présentes et utilisées correctement.
9.3
Dans chaque page web, chaque liste est-elle correctement structurée ?
Utiliser les balises
<ul>, <ol>, <dl> pour toute liste. Ne pas simuler des listes avec des tirets ou des sauts de ligne.
9.4
Dans chaque page web, chaque citation est-elle correctement indiquée ?
Utiliser
<blockquote> pour les citations longues et <q> pour les citations courtes en ligne.Présentation de l'information
8 critères NC
10.1
Dans le site web, des feuilles de styles sont-elles utilisées pour contrôler la présentation de l'information ?
Ne pas utiliser d'attributs HTML de présentation (
align, bgcolor, border, font…). Toute mise en forme doit passer par le CSS.
10.4
Le texte reste-t-il lisible lorsque la taille des caractères est augmentée jusqu'à 200 % ?
À 200 % de zoom navigateur, le texte ne doit pas déborder ou être tronqué, et aucune information ne doit être perdue.
10.6
Chaque lien dont la nature n'est pas évidente est-il visible par rapport au texte environnant ?
Les liens dans du texte courant doivent être distinguables de leur environnement autrement que par la couleur seule (soulignement, contraste suffisant...).
10.7
Pour chaque élément recevant le focus, la prise de focus est-elle visible ?
L'indicateur de focus (outline, bordure…) doit être clairement visible sur tous les éléments interactifs. Ne pas utiliser
outline: none sans alternative.
10.9
L'information ne doit pas être donnée uniquement par la forme, taille ou position.
Toute information transmise par la position (ex. : « cliquez sur le bouton à droite »), la forme ou la taille doit aussi être fournie par un autre moyen (texte, icône + légende…).
10.11
Les contenus peuvent-ils être présentés sans perte d'information ou de fonctionnalité lorsque l'écran est agrandi jusqu'à 320 px ?
À 320 px de largeur (équivalent 400 % de zoom sur un écran 1280 px), le contenu doit rester lisible et fonctionnel sans défilement horizontal.
10.12
Les propriétés d'espacement du texte peuvent-elles être redéfinies par l'utilisateur sans perte de contenu ou de fonctionnalité ?
Le site doit supporter la surcharge CSS suivante sans perte : hauteur de ligne ≥ 1.5, espacement des lettres ≥ 0.12em, espacement des mots ≥ 0.16em, espacement des paragraphes ≥ 2em.
10.14
Les contenus additionnels apparaissant au survol, à la prise de focus ou à l'activation d'un composant sont-ils contrôlables par l'utilisateur ?
Les tooltips et popups déclenchés par
:hover/:focus doivent pouvoir être : ignorés (sans prise de focus), survolés sans disparaître, et fermés sans déplacer le focus (ex. touche Échap).Formulaires
6 critères NC
11.1
Chaque champ de formulaire a-t-il une étiquette ?
Chaque champ doit avoir une étiquette visible associée via
<label for>, ou (aria-label / aria-labelledby si invisible).
11.8
Dans chaque formulaire, les items de même nature d'une liste de choix sont-ils regroupés de manière pertinente ?
Les options d'un
<select> de même catégorie doivent être regroupées avec <optgroup label="…">.
11.9
L'intitulé de chaque bouton est-il pertinent ?
Les boutons (
<button>, <input type="submit">…) doivent avoir un intitulé explicite qui décrit l'action réalisée.
11.10
Dans chaque formulaire, le contrôle de saisie est-il utilisé de manière pertinente ?
Les erreurs de validation doivent être signalées de manière accessible : message d'erreur textuel lié au champ (
aria-describedby, aria-invalid).
11.11
Dans chaque formulaire, le contrôle de saisie est-il accompagné de suggestions facilitant la correction des erreurs ?
En cas d'erreur, des suggestions de correction doivent être proposées dès que cela ne compromet pas la sécurité ou la finalité du contrôle.
11.13
La finalité d'un champ de saisie peut-elle être déduite pour faciliter le remplissage automatique ?
Les champs collectant des données personnelles doivent avoir l'attribut
autocomplete avec la valeur appropriée (name, email, tel…).Navigation
2 critères NC
12.6
Des liens d'évitement ou d'accès rapide permettent-ils d'accéder aux zones de contenu ?
La page doit proposer des liens d'évitement en début de code pour sauter la navigation, aller au contenu principal, etc. Ils peuvent être masqués visuellement mais doivent être visibles au focus.
12.8
Dans chaque page web, l'ordre de tabulation est-il cohérent ?
L'ordre de tabulation (touche Tab) doit suivre un ordre logique cohérent avec l'ordre visuel et la lecture naturelle du contenu.
Consultation
1 critère NC
13.8
Dans chaque page web, chaque contenu en mouvement ou clignotant est-il contrôlable par l'utilisateur ?
Toute animation, carrousel ou contenu clignotant de plus de 5 secondes doit pouvoir être mis en pause, arrêté ou masqué par l'utilisateur.