<aside> <img src="/icons/link_gray.svg" alt="/icons/link_gray.svg" width="40px" /> Source de la checklist : documentation beta.gouv

</aside>

Ce que tu peux vérifier en ouvrant ton navigateur

Titre des pages

<aside> 👉 Les titres sont :

• [ ] Pertinents
• [ ] Courts
• [ ] Décrivent brièvement le contenu de la page
• [ ] Permettent de différencier la page des autres pages

</aside>

Personnalisation du texte

<aside> 👉 Si on zoome à 200 % :

• [ ] Tout le texte est agrandi
• [ ] Rien ne disparaît
• [ ] Rien n’est coupé
• [ ] Les textes et images ne se chevauchent pas
• [ ] Les formulaires restent lisibles
• [ ] Pas besoin de scroll horizontal pour accéder le contenu

</aside>

Navigation au clavier

<aside> 👉 Débranche ta souris 🐭 et vérifie en utilisant les touches Tab, Entrée, Espace, et les flèches directionnelles que :

• [ ] Le focus au clavier est visible
• [ ] L’ordre de navigation est logique
• [ ] L’accès à tous les éléments (liens, champs, boutons, lecteur multimédia) est possible
• [ ] Le focus ne reste pas coincé (on peut sortir d’une vidéo, par exemple) </aside>

Formulaires

<aside> 👉 Trouve les formulaires (même les petits, avec juste un champ) et vérifie que :

• [ ] Toutes les options sont accessibles au clavier (même les menus déroulants)
• [ ] Les champs ont un label
• [ ] La consigne ne disparaît pas au clic (mort aux placeholders !)
• [ ] Les champs obligatoires sont indiqués textuellement, et pas seulement par une couleur
• [ ] Les textes d’aide sont avant le champ, pas après
• [ ] Les formats spécifiques comme les dates sont indiquées dans le label
• [ ] Les textes d’erreur sont explicites : quel champ est concerné, comment corriger

</aside>

Les contenus animés

<aside> 👉 Identifie ce qui bouge, clignote et pourrait distraire ou perturber. Vérifie que :

• [ ] Si ça bouge, pas plus de 5 secondes.
• [ ] L’utilisateur peut mettre en pause ou cacher ce qui bouge.
• [ ] L’utilisateur peut régler la fréquence de mise à jour des trucs qui bougent, ou les arrêter.
• [ ] Aucun contenu ne clignote ou ne se met à clignoter plus de trois fois en une seconde.

</aside>

Ce que tu peux vérifier avec un ou deux outils simples

C’est déjà un peu plus technique, mais tu peux mettre ANDI dans ta barre de favoris, ou aller sur WAVE et copier-coller l’URL de la page que tu veux vérifier !

Hiérarchie de l’information

<aside> 👉 Ouvre ta page avec ANDI ou WAVE. Vérifie que :

• [ ] sauf exception, ta page a bien un ou plusieurs titres de rubriques
• [ ] les gros textes sont bien marqués comme des titres (H1, H2, H3)
• [ ] la hiérarchie des titres a du sens : un H3 ne peut pas être plus gros d’un H2

</aside>

Hiérarchie de l’information

<aside> 👉 Ouvre ta page avec ANDI ou WAVE. Vérifie que :

• [ ] le contraste minimum par défaut est respecté pour les textes de taille normale
• [ ] les personnes peuvent surcharger la couleur de texte ou du fond.

</aside>

Alternatives aux images