Checklist RGAA 4 pour équipes produit : les 10 critères prioritaires avant votre audit

Les balises <img> sans attribut alt renseigné constituent la non-conformité la plus fréquente dans les premiers audits RGAA. Pour les images porteuses d'information, le texte alternatif doit décrire l'information véhiculée, pas simplement dire « image » ou « photo ». Pour les images décoratives, l'attribut alt="" doit être présent mais vide, afin que les lecteurs d'écran ignorent l'élément. Les composants d'image Next.js génèrent souvent des alt manquants quand les données viennent d'un CMS ou d'une API : vérifiez vos sources de données, pas seulement votre code.

Le rapport de contraste minimum est de 4,5:1 pour les textes de taille normale (inférieur à 18px en regular ou 14px en bold) et de 3:1 pour les grands textes. Les palettes de gris légers sur fond blanc sont systématiquement non conformes — en particulier les textes de placeholder, les labels inactifs et les textes d'aide. Les outils de design comme Figma ne signalent pas toujours ces insuffisances. Testez toutes vos nuances de gris avec un outil de mesure de contraste avant l'audit.

Ajouter outline: none; ou outline: 0; dans les reset CSS est l'une des erreurs les plus répandues dans les codebases React. Tout élément interactif — bouton, lien, champ, composant custom — doit présenter un indicateur de focus visible et suffisamment contrasté (rapport ≥3:1 entre l'indicateur et le fond adjacent). Le WCAG 2.2 a durci ces exigences avec le critère 2.4.11 (Focus Appearance). Ne supprimez pas le focus par défaut du navigateur sans le remplacer par un équivalent conforme.

Chaque champ de formulaire doit avoir un label explicitement associé via l'attribut for/htmlFor d'un élément <label>, ou via aria-labelledby / aria-label. Les placeholders seuls ne constituent pas des labels accessibles : ils disparaissent à la saisie et ne sont pas lus de manière fiable par tous les lecteurs d'écran. Ce critère est systématiquement contrôlé sur les formulaires d'inscription, de connexion, de recherche et de paiement.

Quand un formulaire comporte des erreurs de validation, elles doivent être présentées de manière accessible : le texte d'erreur doit être associé au champ via aria-describedby, le champ en erreur doit porter aria-invalid="true", et l'erreur doit être annoncée par les lecteurs d'écran au moment de la soumission. Mettre les erreurs uniquement en rouge sans texte explicite est non conforme — la couleur seule ne suffit pas à indiquer une erreur (critère 3.3).

Les liens doivent avoir un intitulé explicite qui permet de comprendre leur destination ou leur action, lu hors contexte. Un lien « Cliquez ici », « En savoir plus » ou « Lire » est non conforme si la destination n'est pas identifiable sans le texte environnant. Solution : texte de lien descriptif, aria-label, ou un <span class="sr-only"> ajoutant du contexte pour les lecteurs d'écran tout en restant invisible à l'écran.

La hiérarchie des titres (H1, H2, H3…) doit être logique, progressive et non sautée. Un seul H1 par page, les H2 pour les sections principales, les H3 pour les sous-sections. Les équipes React ont tendance à utiliser des balises de titre de manière stylistique — choisir h3 parce que la taille de police convient — plutôt que sémantique. Utilisez CSS pour les styles, pas les niveaux de titre. Les auditeurs parcourent systématiquement la structure de titres avec NVDA ou VoiceOver.

L'ordre dans lequel les éléments interactifs reçoivent le focus au clavier (via Tab) doit être cohérent avec l'ordre visuel et logique de la page. Les composants React complexes — modales, menus déroulants, accordéons, tableaux de données — perturbent fréquemment cet ordre. L'utilisation de tabIndex positifs (tabindex="1", tabindex="2"…) est une mauvaise pratique qui crée des ordres de focus imprévisibles. Préférez tabindex="0" pour les éléments custom et laissez le DOM définir l'ordre.

Les vidéos et contenus audio doivent proposer des alternatives accessibles : sous-titres synchronisés pour les contenus audio, audiodescription pour les contenus visuels importants non restitués par la piste audio. Ce critère est souvent ignoré pendant la phase de développement produit. Si votre site intègre des vidéos de démonstration, des témoignages clients ou des webinaires, chacun d'eux est contrôlé lors de l'audit.

Les changements de contexte — navigation automatique, ouverture d'une nouvelle fenêtre, soumission automatique d'un formulaire — ne doivent pas se produire sans action explicite de l'utilisateur, ou l'utilisateur doit en être averti au préalable. Ce critère touche les composants autocomplete qui naviguent automatiquement à la sélection, les redirections automatiques, les modales déclenchées sans interaction utilisateur, et les mises à jour de contenu via live regions mal configurées.