Content visible and understandable without CSS

Impact: Strong to major

Users mainly impacted: Blind and severely visually impaired.

RGAA criteria: Criterion 10.2 - Criterion 10.3

Explanation

Content visible without CSS

Information content inserted via CSS may not be retrieved by screen readers or voice magnifying systems.

Background images

Background images inserted in CSS (background or background-image) must never be informative.

It is possible to transmit the information conveyed by the image via hidden text, however this technique is not recommended. This technique does not allow some devices to read content such as some high contrast modes.

Content generated by CSS

The CSS property content allow us to display content. However, even if this content is visible with CSS enabled, it is no longer visible when CSS is disabled. So, you should never use content to insert text content.

Content and the pseudo-selectors ::after and ::before are very often used for the insertion of icons using icon fonts. If the icons are purely decorative, then there is no accessibility problem. However, if they are icons that carry information, then you must ensure that an alternative means of retrieving this information is available.

A common mistake is to create a link with an icon generated by CSS. In this case the link is empty.

Failure example

In this example the information is only visual. Users using screen reader will not have the information.

<a href="#"><span class="fa fa-home"></span></a>

.fa-home::before {
    content: "\f015";
}

Success example

Ideally, you should add a label that is visible to speech recognition users. However, it is compliant to add only a visible icon, but in this case it is necessary to add an accessible name to the link. The icon is not rendered to assistive technologies thanks to the aria-hidden attribute, a (visual) information is added thanks to the title attribute and an accessible name allows the rendering in technical assistants thanks to a visually hidden text.

<a href="#">
    <span class="fa fa-home" aria-hidden="true" title="Home"></span>
    <span class="sr-only">Home</span>
</a>

.fa-home::before {
    content: "\f015";
}

Home

Content understandable without CSS

Screen reader users do not have a global view of the content. They often search for content by navigating from link to link, heading to heading or region to region.
For this reason it is important to present the content in a logical order. In a navigation by heading, the user expects to read the content that is related to it.
For example, let’s take a sequence of event articles.
In the example below, if the user navigates from heading to heading, he will continue to browse the content by reading the description of the article because it is positioned just after in the code.
Then he will read the category and the date of the second article without being aware that he has changed article. This causes a misunderstanding of the content. In this case, the date of the concert which is important information.

Note that some screen readers can render list or article structures, but this is usually not a default setting.

Failure example

<ul>
    <li>
        <article>
            <p class="category">Concert</p>
            <p class="date"><time datetime="2021-07-06">July 6, 2021</time></p>
            <h2>The Big Push</h2>
            <p class="resume">A crazed kind of energy and authentic sound</p>
        </article>
    </li>
    <li>
        <article>
            <p class="category">Concert</p>
            <p class="date"><time datetime="2021-07-17">July 17, 2021</time></p>
            <h2>Deluxe</h2>
            <p class="resume">DELUXE in concert at 6MIC, the new venue in Aix-en-Provence</p>
        </article>
    </li>
</ul>

• Concert

  July 6, 2021

  The Big Push

  A crazed kind of energy and authentic sound

• Concert

  July 17, 2021

  Deluxe

  DELUXE in concert at 6MIC, the new venue in Aix-en-Provence

Success example

The easiest way to fix this is to position the content in a logical order visually and in the code.

<ul>
    <li>
        <article>
            <h2>The Big Push</h2>
            <p class="category">Concert</p>
            <p class="date"><time datetime="2021-07-06">July 6, 2021</time></p>
            <p class="resume">A crazed kind of energy and authentic sound</p>
        </article>
    </li>
    <li>
        <article>
            <h2>Deluxe</h2>
            <p class="category">Concert</p>
            <p class="date"><time datetime="2021-07-17">July 17, 2021</time></p>
            <p class="resume">DELUXE in concert at 6MIC, the new venue in Aix-en-Provence</p>
        </article>
    </li>
</ul>

• The Big Push

  Concert

  July 6, 2021

  A crazed kind of energy and authentic sound

• Deluxe

  Concert

  July 17, 2021

  DELUXE in concert at 6MIC, the new venue in Aix-en-Provence