Is CSS modifying the visual layout and changing the meaning of content?
1.3.2 Meaningful Sequence
Introduction
This document provides information about the Acquia Web Governance accessibility check:
Is CSS modifying the visual layout and changing the meaning of content?
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.
Who
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
This section provides information on how to identify and review the issue.
How to identify it
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.
How to review it
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:
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 typically requires 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.
Is CSS modifying the visual layout and changing the meaning of content?
1.3.2 Meaningful Sequence
Introduction
This document provides information about the Acquia Web Governance accessibility check:
Is CSS modifying the visual layout and changing the meaning of content?
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.
Who
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
This section provides information on how to identify and review the issue.
How to identify it
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.
How to review it
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:
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 typically requires 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.
Web Governance