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 carrying information.

Also, do not generate informative content with 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> element 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 without CSS that it is the current page 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 should not be generated by CSS.

In this first example, information about the PDF format of the downloadable fils is added with CSS. This is problematic.

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

In this second example, information about a “New Window” is added with CSS. This is also incorrect.

a[target=_blank]::after {
   content: ' (new window)';
}

Find out more

Comments

Add a comment

Required fields are marked *.

Back to top