Aller au contenu principal
Logo RGAA CheckerRGAA Checker
Critère 10.8

Contenus cachés

Les contenus cachés doivent être ignorés par les technologies d'assistance.

En Bref : L'essentiel à retenir

  • L'objectif est de ne pas vocaliser des éléments invisibles à l'écran, sauf exceptions comme les textes pour lecteurs d'écran.
  • Pour cacher visuellement et aux lecteurs d'écran, utilisez `display: none`, `visibility: hidden` ou l'attribut `hidden`.
  • Pour cacher visuellement mais conserver pour les lecteurs d'écran, utilisez une classe CSS 'sr-only'.
  • N'appliquez pas `aria-hidden="true"` sur un élément visible.

Objectif

Ne pas restituer vocalement des éléments qui sont invisibles à l'écran (sauf cas particuliers comme les textes pour lecteurs d'écran).

Solution Technique

  • Pour cacher visuellement ET aux lecteurs d'écran : display: none ou visibility: hidden ou l'attribut hidden.
  • Pour cacher visuellement mais GARDER pour les lecteurs d'écran (ex: label accessible) : utilisez une classe CSS "sr-only" (screen reader only).
  • N'utilisez pas aria-hidden="true" sur un élément visible.

Ressources