Picto thématique

Rule n° 178 - The content and meaning of each page are not altered when styles are disabled.

The styles are a presentation layer. The contents must remain legible and understandable when this layer can not be seen or displayed.

#Presentation #Development #Accessibility

Goal

  • Allow users whose browsers don’t apply the website’s style sheets or whose method of access is not visible to understand the site’s content.
  • Meticulously separate the content from its presentation, to foster interoperability.
  • Improve the way content is taken into account by search engines and indexing tools.
  • Improve the accessibility of content for people with disabilities.

Implementation

When using CSS (including via JavaScript), be sure to maintain consistency by presenting content in the same order with or without CSS formatting. This will avoid ending up, for example, with a menu cut in half if the style sheets are deactivated.

Control

Visually compare pages with and without applying CSS styles. This task will make use of all of the following methods on each page:

  • Disable CSS styles in the browser;
  • Check that there is no loss of information, if there is - find out by examining the styles applied to the element in question using a code inspector.
  • Check that the content remains readable, for example in the case of a transparent HTML image where its readability depends on the background colour applied with the background-color property.
  • Check the consistency of the content displayed without CSS, which must remain logically organised and fully understandable. For example, a flowchart made up of different blocks of text formatted via CSS positioning properties may appear as a succession of meaningless blocks of text in the absence of CSS.

By Opquast - Read the license