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. It is therefore important to know how to hide them with the right tools.

Objectives

• Facilitate adaptation of the display to the media (mobile or other) or to individual needs (enlarging font size, changing colors, font, weight, justification, etc.).
• Improve accessibility of content to readers with disabilities

Implementation

• Unless the content is intended to become visible upon user action (for example, in a tab or drop-down menu), do not use the display or visibility properties, the HTML hidden attribute, or set the value of aria-hidden to true to hide content.
• It is preferable to use CSS properties that allow content to be placed outside the browser display area (such as position or text-indent) or cropped (clip).
• You can also use ARIA properties designed to associate a label with content (aria-label, aria-labelledby, aria-describedby).
• In the case of a form field label, it is possible to use the title attribute.

Control

• In the generated code and CSS style sheets of the pages examined, a code inspector must be used to detect the presence of content that is hidden from view, excluding content that is intended to become visible when the user takes action.
• It is also necessary to verify that none of this content uses the prohibited techniques mentioned in the implementation when it is intended to be rendered by assistive technology.