1.3.2 Meaningful Sequence
This document provides information about the related accessibility checks:
Changing the meaning of content by positioning information with CSS.
CSS positioning must not change the meaning of the content or the ability of the user 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.
Some users are unable to perceive the visual layout of a webpage. For instance, a blind user who uses 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 when it is omitted. 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 users who choose to disable CSS or use custom stylesheets for better readability.
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.
How to review it.
The 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 whether the content is still understandable. You can use our web browser extension to view your page without CSS by following these steps:
When you view the page with CSS disabled, ask yourself:
Is the content still presented in an order that makes it understandable?
For further instructions, visit the user guide article:
How to review an accessibility issue
If this content did not answer your questions, try searching or contacting our support team for further assistance.
1.3.2 Meaningful Sequence
This document provides information about the related accessibility checks:
Changing the meaning of content by positioning information with CSS.
CSS positioning must not change the meaning of the content or the ability of the user 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.
Some users are unable to perceive the visual layout of a webpage. For instance, a blind user who uses 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 when it is omitted. 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 users who choose to disable CSS or use custom stylesheets for better readability.
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:
<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.
How to review it.
The 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 whether the content is still understandable. You can use our web browser extension to view your page without CSS by following these steps:
When you view the page with CSS disabled, ask yourself:
Is the content still presented in an order that makes it understandable?
For further instructions, visit the user guide article:
How to review an accessibility issue
If this content did not answer your questions, try searching or contacting our support team for further assistance.