Gravité : Critique ARIA et composants riches

Corps de page masqué avec aria-hidden

aria-hidden="true" sur <body> rend toute la page invisible aux lecteurs d'écran : le site entier disparaît pour eux.


Qui est concerné

  • Toutes les personnes aveugles ou malvoyantes : la page devient un écran noir vocal

Pourquoi c'est important

aria-hidden retire un élément, et toute sa descendance, de l'arbre d'accessibilité. Posé sur <body>, il efface l'intégralité de la page pour les lecteurs d'écran. C'est souvent un oubli après l'ouverture d'une modale qui a masqué le fond et n'a pas rétabli l'état. Critère 4.1.2, niveau A.

Comment le tester vous-même

  1. Inspectez la balise <body> : elle ne doit jamais porter aria-hidden="true".
  2. Après fermeture d'une modale, vérifiez que l'aria-hidden posé sur le fond a bien été retiré.

Comment corriger

Ne mettez jamais aria-hidden="true" sur <body> : cela masque toute la page aux lecteurs d'écran.

À éviter
<body aria-hidden="true">
Recommandé
<body>
  <!-- Pour masquer le fond derrière une modale, ciblez le conteneur du fond,
       jamais body, et rétablissez l'état à la fermeture -->

Critères de référence

WCAG 2.1
  • 4.1.2 : Nom, rôle et valeur (niveau A)
RGAA 4.1 Thème 7 : Scripts

Plainpied détecte ce défaut automatiquement et le localise page par page. La conformité totale combine détection automatique et vérifications humaines : voir notre méthode.

Ce défaut est-il présent sur votre site ?

Scan gratuit, score et corrections en dix minutes, sans compte.

Lancer un audit gratuit