Changing the meaning of content by positioning information with CSS¶

Introduction¶

This document gives information about the related Acquia Optimize checks:

Changing the meaning of content by positioning information with CSS.

What¶

CSS positioning must not change the meaning of the content or the user's ability to understand it correctly.

CSS (Cascading Style Sheets) is a language used to style web pages. It controls the layout, colors, fonts, element positioning, and overall appearance.

Why¶

Some users are unable to perceive the visual layout of a webpage. For instance, a blind user using a screen reader cannot tell if a content element is positioned on the left, right, top, or bottom of the page. Screen readers convey content in the order defined by the HTML, which can differ from the visual layout created by CSS. If this visual placement is crucial for understanding the content, it can lead to confusion. This issue is especially problematic when the order impacts the meaning of the content. In such cases, relying on CSS for visual placement can create significant challenges for blind screen reader users, who access content only in the HTML reading order. It can also affect other users who choose to disable CSS or use custom stylesheets for better readability.

This check affects the following users who have¶

• Visual-impairments: Who access the site contents with a screen reader or screen magnification software.
• No impairments: Who prefer to view the page with customized CSS styling.

User story¶

Bridgit is a blind mother to a five-year-old girl and an 11-year-old boy:

“You know, there was this one time when I was trying to apply for extra time on an exam. Being blind, I often need a little longer. So, I started reading through the application procedure, and honestly, I did not understand it at all. It just did not make sense to me.

Then I asked my sighted friend to take a look, and it turned out the instructions were laid out in three boxes that had to be read in a specific order for everything to make sense. But that was not the order I got it in, so it felt completely confusing to me.”

Examples¶

This section gives some examples of the issue.

Example - CSS transformations disrupt reading order¶

Three cards are arranged using CSS transformations, resulting in a frustrating experience for screen reader users. This happens because the visual order of the content does not match the sequence in which a screen reader conveys it.

HTML:

<div class="card-container">
   <div class="card" id="card2">Step 2</div>
   <div class="card" id="card3">Step 3</div>
   <div class="card" id="card1">Step 1</div>
</div>

CSS:

.card-container { display: flex; }
.card { width: 100px; height: 100px; }
#card1 { transform: translateX(-200%); /* Moves Card 1 to the left, making it appear first */ }
#card2 { transform: translateX(100%); /* Card 2 moves from first position to the middle */ }
#card3 { transform: translateX(100%); /* Moves Card 3 to the right */ } Message is edited. At 6:26 PM.

When rendered, the cards will visually appear as:

1. Step 1
2. Step 2
3. Step 3

However, due to the HTML structure, a screen reader will read them in this order:

1. Step 2
2. Step 3
3. Step 1

This mismatch can lead to confusion for screen reader users.  And can create a disjointed experience and make it difficult to understand the context of the content.

Example – HTML ensures good reading order¶

In the example below, the HTML order for the three cards, has been adjusted to ensure a good reading sequence for screen reader users, while also eliminating the need to rearrange elements with CSS transformations to achieve the correct visual order.

HTML:

<div class="card-container">
   <div class="card" id="card1">Step 1</div>
   <div class="card" id="card2">Step 2</div>
   <div class="card" id="card3">Step 3</div>
</div>

CSS:

.card-container { display: flex; }
.card { width: 100px; height: 100px; }

When rendered, the cards will both visually and for the screen reader appear as:

1. Step 1
2. Step 2
3. Step 3

It is obviously beneficial when the visual order and the screen reader order match.

How¶

How to review it.

The Acquia Optimize platform highlights elements where CSS techniques are used in a way that may create a mismatch between the visual layout order and the code order typically conveyed to screen reader users.

Review whether the use of CSS positioning disrupts the understanding of the content for users who do not experience the page with the CSS-controlled layout. The easiest way to assess this is to view the page without CSS and determine whether the content is still understandable. You can use our web browser extension to view your page without CSS by following these steps:

1. Launch the web browser extension on the page you wish to review
2. Click “View Options”
3. Untoggle the setting “Enable CSS”

When you view the page with CSS disabled, ask yourself:
Is the content still presented in an order that makes it understandable?

• If the answer is no, there is an issue that needs to be fixed before you can mark the content as reviewed. This will typically require a frontend developer to adjust the HTML structure and CSS code to resolve the problem.
  If the answer is yes, then everything is good, and you can mark the issue as reviewed.

For further instructions, see the user guide article:

How to review an accessibility issue

Additional resources¶

WCAG success criteria¶

1.3.2 Meaningful Sequence

Other resources¶

CSS Layout