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

Certain CSS properties make it possible to make certain content invisible on the screen. The problem is that this content also risks disappearing for users who need to consult it. So know how to hide them with the right tools.

Objectives

• Facilitate the adaptation of the rendering to the media (mobile or other) or to the user's needs (enlargement of character size, modification of colors, font, weight, justification, etc.).
• “Improve the accessibility of content to people with disabilities"

Implementation

• Unless the content concerned is intended to be made visible and perceptible upon user action (tabs, drop-down menus, etc.):
  • Do not use the display and visibility properties to hide content.
  • Do not use the HTML hidden attribute to hide content.
  • Do not give content an ARIA aria-hidden true attribute.
  To use:
  • CSS properties allowing content to be positioned outside the browser display area (position, text-indent) or cropped (clip);
  • ARIA properties allowing you to associate a label with content (aria-label, aria-labelledby, aria-describedby);
  • or, in the case of a form field label, its title attribute.

Control

• In the generated code and in the CSS style sheets of the pages examined:
  • Detect, using a code inspector, content that would be hidden on display (apart from that intended for be made visible upon user action).
  • Check that none of this 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.