Checklist WCAG 2.1 AA

Les 28 critères essentiels pour rendre votre site web accessible à tous.

PPerceptible10 critères

1.1.1 (A)Non-text Content

Toute image, icône ou média non-texte doit avoir un texte alternatif.

Solution : Ajoutez alt="description" à chaque <img>
1.2.1 (A)Audio/Video (prerecorded)

Les contenus audio/vidéo pré-enregistrés doivent avoir une alternative.

Solution : Fournissez des transcriptions pour l'audio, des sous-titres pour la vidéo
1.3.1 (A)Info and Relationships

La structure (headings, listes, tableaux) doit être correctement balisée en HTML.

Solution : Utilisez h1→h6, <ul>/<ol>, <table> avec <th> sémantiquement
1.3.2 (A)Meaningful Sequence

L'ordre de lecture du contenu doit être logique.

Solution : Assurez-vous que l'ordre du DOM correspond à l'ordre visuel
1.3.3 (A)Sensory Characteristics

Les instructions ne doivent pas reposer uniquement sur la forme, taille, couleur ou position.

Solution : Ajoutez du texte en complément des indicateurs visuels
1.4.1 (A)Use of Color

La couleur ne doit pas être le seul moyen de transmettre une information.

Solution : Ajoutez des icônes, du texte ou des motifs en plus de la couleur
1.4.2 (A)Audio Control

Si un audio joue automatiquement > 3s, l'utilisateur doit pouvoir le contrôler.

Solution : Ajoutez pause/stop/volume ou ne lancez pas l'audio automatiquement
1.4.3 (AA)Contrast (Minimum)

Ratio de contraste ≥ 4.5:1 pour le texte normal, ≥ 3:1 pour le grand texte.

Solution : Testez vos couleurs avec un vérificateur de contraste
1.4.4 (AA)Resize Text

Le texte doit être redimensionnable à 200% sans perte de contenu.

Solution : Utilisez des unités relatives (rem, em) au lieu de px fixes
1.4.5 (AA)Images of Text

Utilisez du vrai texte plutôt que des images de texte.

Solution : Remplacez les images-texte par du HTML stylé en CSS

UUtilisable10 critères

2.1.1 (A)Keyboard

Toutes les fonctionnalités doivent être utilisables au clavier.

Solution : Utilisez <button> et <a>, ajoutez tabindex et onkeydown
2.1.2 (A)No Keyboard Trap

L'utilisateur ne doit jamais être 'piégé' dans un élément au clavier.

Solution : Assurez-vous que Tab et Esc permettent toujours de sortir d'un composant
2.2.1 (A)Timing Adjustable

Si un contenu a un timeout, l'utilisateur doit pouvoir l'étendre.

Solution : Prévenez avant l'expiration et offrez une extension
2.3.1 (A)Three Flashes

Pas de contenu qui clignote plus de 3 fois par seconde.

Solution : Évitez les animations clignotantes ou ajoutez prefers-reduced-motion
2.4.1 (A)Bypass Blocks

Un mécanisme permet de sauter les blocs répétés (navigation, header).

Solution : Ajoutez un <a href="#main" class="skip-link"> en haut de page
2.4.2 (A)Page Titled

Chaque page doit avoir un titre descriptif unique.

Solution : Utilisez <title> avec le nom de la page + le nom du site
2.4.3 (A)Focus Order

L'ordre du focus clavier doit être logique et prévisible.

Solution : Suivez l'ordre naturel du DOM, évitez tabindex > 0
2.4.4 (A)Link Purpose

Le but de chaque lien doit être clair dans son texte.

Solution : Remplacez "cliquez ici" par un texte descriptif
2.4.6 (AA)Headings and Labels

Les headings et labels doivent décrire clairement le sujet/but.

Solution : Utilisez des headings descriptifs, pas juste 'Section 1'
2.4.7 (AA)Focus Visible

L'indicateur de focus clavier doit être visible.

Solution : Ne supprimez jamais outline sans le remplacer par :focus-visible

CCompréhensible6 critères

3.1.1 (A)Language of Page

La langue de la page doit être définie dans le HTML.

Solution : Ajoutez lang="fr" à la balise <html>
3.1.2 (AA)Language of Parts

Les passages dans une autre langue doivent être identifiés.

Solution : Utilisez lang="en" sur les éléments en anglais dans une page française
3.2.1 (A)On Focus

Le focus ne doit pas déclencher de changement de contexte inattendu.

Solution : N'ouvrez pas de popup ou ne changez pas de page au focus
3.2.2 (A)On Input

Changer une valeur de formulaire ne doit pas soumettre le formulaire automatiquement.

Solution : Attendez que l'utilisateur clique sur un bouton de soumission
3.3.1 (A)Error Identification

Les erreurs de formulaire doivent être identifiées et décrites en texte.

Solution : Affichez un message d'erreur clair à côté du champ invalide
3.3.2 (A)Labels or Instructions

Les champs de formulaire doivent avoir des labels ou instructions.

Solution : Ajoutez <label for='id'> pour chaque <input>

RRobuste2 critères

4.1.1 (A)Parsing

Le HTML doit être valide (IDs uniques, balises fermées).

Solution : Validez votre HTML avec le W3C Validator
4.1.2 (A)Name, Role, Value

Tous les composants d'interface doivent avoir un nom et rôle accessibles.

Solution : Utilisez aria-label, aria-labelledby, ou des éléments natifs

Vérifiez automatiquement ces critères

A11yScan teste automatiquement votre site sur ces critères WCAG 2.1 AA et vous donne un rapport détaillé en 2 minutes.

Scanner mon site gratuitement →