Web Governance
Is CSS modifying the visual layout and changing the meaning of content?
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.”
This section provides some examples of the issue.
Three cards are arranged with CSS transformations, which results 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:
Web Governance<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:
However, due to the HTML structure, a screen reader will read them in this order:
This mismatch can lead to confusion for screen reader users and can create a disjointed experience, which makes it difficult to understand the context of the content.
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 appear both visually and for the screen reader as:
The visual order and the screen reader order match.
This section provides information on how to identify and review the issue.
The Acquia Web Governance 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 content comprehension 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 if the content is still understandable. Do the following steps to use the Web Governance Web Browser Extension to view your page without CSS:
When you view the page with CSS disabled, ask yourself:
Is the content still presented in an order that makes it understandable?
For more information, visit How to review an accessibility issue.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
If this content did not answer your questions, try searching or contacting our support team for further assistance.