Checklist UX et accessibilité : 40 points essentiels pour un design inclusif

L'accessibilité ne doit pas être une réflexion tardive dans le processus de design. Cette checklist complète vous guide à travers les points essentiels à vérifier pour créer des interfaces conformes aux WCAG 2.2 et au RGAA 4.1, tout en offrant une expérience utilisateur optimale.

Pourquoi une checklist UX accessibilité

Selon les dernières études, les entreprises qui intègrent l'accessibilité dès la phase de conception économisent jusqu'à 80% des coûts de remédiation par rapport à celles qui corrigent après le développement. Une checklist structurée permet d'anticiper les problèmes et de maintenir une cohérence dans vos projets.

L'European Accessibility Act, entré en vigueur en juin 2025, renforce l'importance de cette approche proactive pour toutes les entreprises opérant dans l'Union européenne.

Couleurs et contrastes

Contrastes textuels

Texte standard : ratio de contraste minimum de 4.5:1 avec l'arrière-plan (WCAG 1.4.3)
Grands textes (18pt+ ou 14pt gras) : ratio minimum de 3:1 (WCAG 1.4.3)
Texte sur images : contraste suffisant dans toutes les zones où le texte apparaît
Texte des placeholder : ratio de 4.5:1 (souvent négligé)

Éléments graphiques

Icônes significatives : contraste de 3:1 avec l'arrière-plan (WCAG 1.4.11)
Bordures de formulaires : contraste de 3:1 pour les champs de saisie
Graphiques et data viz : chaque élément distinguable avec contraste suffisant
Indicateurs de focus : clairement visibles avec contraste adéquat

Usage de la couleur

Information non colorielle : toute information en couleur a un équivalent textuel ou iconique (WCAG 1.4.1)
Liens dans le texte : distinguables autrement que par la couleur (soulignement recommandé)
États visuels : succès, erreur, avertissement identifiés par plus que la couleur seule
Compatibilité daltonisme : interface testée avec simulateur

[!TIP] Utilisez notre simulateur de daltonisme pour vérifier rapidement vos choix de couleurs.

Typographie et lisibilité

Tailles et espacements

Taille de base : minimum 16px pour le texte courant
Interligne : au moins 1.5 fois la taille de police (WCAG 1.4.12)
Espacement des paragraphes : au moins 2 fois la taille de police
Espacement des lettres : au moins 0.12 fois la taille de police
Espacement des mots : au moins 0.16 fois la taille de police

Polices et styles

Polices lisibles : privilégier les sans-serif pour le corps de texte
Italiques limités : éviter pour les longs passages
Majuscules : éviter pour les phrases complètes
Justification : éviter le texte justifié qui crée des espaces irréguliers

Redimensionnement

Zoom 200% : contenu lisible et fonctionnel sans perte d'information (WCAG 1.4.4)
Unités relatives : utiliser em, rem ou pourcentages plutôt que pixels fixes
Reflow : pas de défilement horizontal à 320px de largeur (WCAG 1.4.10)

Hiérarchie de contenu

Titres logiques : structure h1-h6 cohérente et sans saut de niveau
Un seul h1 : par page, décrivant le contenu principal
Landmarks ARIA : main, nav, header, footer correctement implémentés
Ordre de lecture : logique et cohérent avec la présentation visuelle

Tous les éléments interactifs : accessibles via Tab
Ordre de tabulation : logique et prévisible (WCAG 2.4.3)
Focus visible : indicateur clair sur l'élément actif (WCAG 2.4.7)
Pas de piège au clavier : possibilité de sortir de tout composant (WCAG 2.1.2)
Raccourcis clavier : documentés et désactivables si conflits potentiels

Liens et boutons

Texte de lien descriptif : objectif clair hors contexte (WCAG 2.4.4)
Pas de « cliquez ici » : éviter les textes génériques
Distinction lien/bouton : liens pour navigation, boutons pour actions
Ouverture nouvelle fenêtre : prévenir l'utilisateur si target="_blank"
Taille des cibles : minimum 44x44 pixels pour les zones cliquables (WCAG 2.5.5)

[!NOTE] Consultez notre guide sur les liens accessibles pour approfondir ce sujet.

Formulaires

Labels et instructions

Labels visibles : chaque champ a un label explicite et associé
Placeholder non suffisant : ne jamais remplacer le label par un placeholder
Instructions préalables : formats attendus indiqués avant la saisie
Champs obligatoires : clairement identifiés (pas seulement par astérisque rouge)

Validation et erreurs

Identification des erreurs : message textuel explicite (WCAG 3.3.1)
Localisation des erreurs : lien vers le champ concerné
Suggestions de correction : aide à la résolution des erreurs (WCAG 3.3.3)
Prévention des erreurs : confirmation pour actions irréversibles (WCAG 3.3.4)

Accessibilité technique

Attribut for/id : labels correctement associés aux champs
Groupement logique : fieldset et legend pour les groupes de champs
Autocomplete : attribut autocomplete pour les données personnelles
aria-describedby : pour les instructions supplémentaires

Médias et contenus riches

Images

Alt pertinent : texte alternatif décrivant le contenu ou la fonction
Images décoratives : alt vide (alt="") et role="presentation"
Images complexes : description longue fournie
Images de texte : évitées sauf logo (WCAG 1.4.5)

Vidéos et audios

Sous-titres : pour toutes les vidéos avec parole
Audiodescription : pour les vidéos où le visuel est essentiel
Transcription : pour les podcasts et contenus audio
Contrôles accessibles : lecture, pause, volume au clavier

Animations et mouvements

Pas d'autoplay : ou bouton pause accessible immédiatement
Respect prefers-reduced-motion : animations réduites si demandé
Pas de clignotement : éviter les flashs supérieurs à 3 par seconde (WCAG 2.3.1)
Durée limitée : animations de moins de 5 secondes ou arrêtables

Interactions et comportements

Composants interactifs

États visibles : hover, focus, active, disabled clairement distincts
Retour utilisateur : feedback immédiat après action
Messages d'état : annonces aux technologies d'assistance (aria-live)
Modales : gestion du focus et fermeture au clavier (Échap)

Temporisation

Délais ajustables : possibilité d'étendre les timeouts (WCAG 2.2.1)
Pas de perte de données : sauvegarde avant expiration de session
Avertissement : prévenir avant la fin du délai

Touch et mobile

Gestes alternatifs : pas de geste complexe obligatoire (WCAG 2.5.1)
Annulation possible : action déclenchée au relâchement, pas au toucher
Orientation : contenu accessible en portrait et paysage (WCAG 1.3.4)

Vérification finale

Avant de valider vos maquettes, effectuez ces tests essentiels.

Tests manuels rapides

Navigation clavier complète : parcourez toute l'interface avec Tab uniquement
Zoom 200% : vérifiez la lisibilité et l'absence de perte de contenu
Lecteur d'écran : testez les parcours principaux avec NVDA ou VoiceOver
Mode contraste élevé : vérifiez le rendu dans les modes d'affichage alternatifs

Outils recommandés

Utilisez notre outil d'audit accessibilité pour une vérification automatisée de nombreux critères. Complétez par des tests manuels car les outils automatisés ne détectent qu'environ 30 à 40% des problèmes d'accessibilité.

Conclusion

Cette checklist constitue un point de départ solide pour intégrer l'accessibilité dans votre workflow UX. Adaptez-la à vos projets spécifiques et mettez-la à jour régulièrement en fonction des évolutions des normes. L'accessibilité bénéficie à tous les utilisateurs et représente un investissement rentable pour toute organisation.