Previous rule | Registry #060 | Next rule

Content that must be rendered in a screen reader is not hidden

Some CSS properties make certain content invisible on the screen. The problem is that these content may also disappear for users who need to consult them. So be sure to hide them with the right tools.

Objectives

  • Facilitate the adaptation of rendering to media (mobile or otherwise) or to the needs of readers (expanding the size of the characters, changing colors, police, fat, justification, etc. ).
  • Improve accessibility of content to readers with disabilities

Implementation

  • Sauf si le contenu concerné est destiné à être rendu visible et perceptible sur action de les lectrices et lecteurs (onglets, menus déroulants, etc.) :
    • Ne pas utiliser les propriétés display et visibility pour masquer le contenu.
    • Ne pas utiliser l’attribut HTML hidden pour masquer le contenu.
    • Ne pas donner au contenu un attribut ARIA aria-hidden true.
    Utiliser:
    • les propriétés CSS permettant de positionner le contenu en dehors de la zone d’affichage du navigateur (position, text- indent) ou de le rogner (clip) ;
    • les propriétés ARIA permettant d’associer un libellé à un contenu (aria-label, aria-labelledby, aria-describedby) ;
    • ou, dans le cas d’une étiquette de champ de formulaire, l’attribut title de celui-ci.

Control

  • In managed code and CSS stylesheets of pages reviewed :
    • Detect, using a code inspector content that would be hidden from display (besides those intended to be made visible on action of readers and readers).
    • Make sure that none of these content uses the techniques indicated in the implementation if they are intended to be rendered in a screen reader.

Validation

  • Needs to be human verified.

Informations