Certain CSS properties make content invisible to both the screen and users who need to access it. It is therefore essential to use the correct methods to hide content visually while keeping it available for assistive technologies.

Objectives

• Facilitate the adaptation of media rendering to user needs (font size, color adjustments, typeface, weight, justification, etc.) and various reading devices, including mobile.
• Ensure content is accessible to people with disabilities.

Implementation

• Unless the content is intended to be revealed by a user action (e.g., within a tab or a dropdown menu), avoid using the display or visibility properties, the hidden HTML attribute, or setting aria-hidden="true" to hide content.
• Use CSS techniques that position content off-screen (such as position or text-indent) or use clipping methods to hide content visually without removing it from the accessibility tree.
• Use ARIA attributes designed to provide labels or descriptions (aria-label, aria-labelledby, aria-describedby) as an alternative.
• For form field labels, use the title attribute when necessary.

Control

• Check the generated code and CSS stylesheets for visually hidden content, excluding elements intended to be revealed by user interaction.
• Ensure that content meant for assistive technologies does not use the restricted methods mentioned in the implementation guidelines.