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

Position of the current selection in the menu (Example 1)

In this example, “Programs” has bold text a red border indicating it is currently selected.

In the solution presented below, a <strong> tag is added to ensure that the information is not lost without CSS.

<a href="…" aria-current="true">
   <strong>Programs</strong>
</a>

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.

Find out more

Comments

Back to top