10.3 Ensure that the content is understandable with CSS turned off

Ensure that the information remains available and understandable even when CSS is disabled, especially when colors, sizes, shapes or positions are information carriers.

Also, make sure not to generate informative content 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.

Position of the current selection in the menu (example 2)

In this example, a different colored arrow and an additional border indicate that the link “Values” is the current page.

In this case, an efficient way of conveying that it is the current page without CSS is to remove the surrounding <a> tag.

<ul>
   <li><a href="…">2015 key figures</a></li>
   <li><a href="…">Governance</a></li>
   <li aria-current="page">Values</li>
   <li><a href="…">Subsidiaries</a></li>
   <li><a href="…">SPIE around the world</a></li>
   <li><a href="…">Innovation</a></li>
   <li><a href="…">History</a></li>
</ul>

CSS Generated Content (example 3)

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: ' *';
}

input[aria-required=true]::before {
   content: '* ';
}

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

Comments

Updates

Back to top