10.3 Ensure that the content is understandable with CSS turned off

Ensure that informational content is not generated using only CSS.

Examples

Link or button icons (example 1)

When an icon used as a link or button (without a title) is integrated via CSS, a substitution text must be integrated into the HTML content of the link or button tag.

An example of implementation is available in the chapter on managing the alternative text of icons inserted via CSS.

Attention

Adding an aria-label or title attribute as a text alternative will not be valid here, as the link or button will have no HTML content and will therefore no longer be available when CSS is deactivated.

CSS Generated Content (example 2)

When informative content is necessary to understand the content, it must not be generated by CSS.

a[href*=".pdf"]::after {
   content: ' (PDF)';
}

In this example, information about the PDF format of the downloadable files is added with CSS. This is incorrect.

label.required::after {
   content: ' *';
}

In this example, the asterisk flagging up the mandatory fields of a form is added using CSS, which is also incorrect.

Comments

Updates

20 August 2024: Update of the first example.
02 September 2025: Update of the examples.