This document provides information about the related accessibility checks:
Changing the meaning of content by positioning information with CSS.
What
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.
Why
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.
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 provides some examples of the issue.
Example - CSS transformations disrupt reading order
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.
.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:
Step 1
Step 2
Step 3
However, due to the HTML structure, a screen reader will read them in this order:
Step 2
Step 3
Step 1
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.
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.
When rendered, the cards appear both visually and for the screen reader as:
Step 1
Step 2
Step 3
The visual order and the screen reader order match.
How
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:
Launch the web browser extension on the page you wish to review.
Click View Options.
Toggle OFF 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, visit the user guide article:
Changing the meaning of content by positioning information with CSS
1.3.2 Meaningful Sequence
Introduction
This document provides information about the related accessibility checks:
Changing the meaning of content by positioning information with CSS.
What
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.
Why
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.
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 provides some examples of the issue.
Example - CSS transformations disrupt reading order
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.
.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:
Step 1
Step 2
Step 3
However, due to the HTML structure, a screen reader will read them in this order:
Step 2
Step 3
Step 1
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.
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.
When rendered, the cards appear both visually and for the screen reader as:
Step 1
Step 2
Step 3
The visual order and the screen reader order match.
How
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:
Launch the web browser extension on the page you wish to review.
Click View Options.
Toggle OFF 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, visit the user guide article:
Web Governance