1.3.1 Info and Relationships
This document gives information about the related Acquia Optimize checks:
Non-decorative content in pseudo classes.
Text characters that convey information to users should not be added using the ::before and ::after pseudo-elements.
When meaningful content is added using pseudo-elements like ::before and ::after, there is a risk that this information may be lost for users who use custom CSS for improved readability or for users of assistive technologies like screen readers. These tools typically do not convey content added through CSS and only read content that is directly inserted into the page's HTML code.
This check affects the following users who have:
Visual impairments: Or others who access the site contents with a screen reader or screen magnification software.
Reading or concentration difficulties: Or others who use custom CSS to make it easier to read or focus on the page's content.
Bridgit is a blind mother to a five-year-old girl and an 11-year-old boy:
"You know, sometimes it feels like there is just something missing when I am using the computer. Like, the screen reader does not always pick up everything. I remember when I started my current job, I had to do one of those mandatory onboarding courses online.
After each lesson, there was a quiz with questions I had to answer. The issue was, I could not tell which questions I got right or wrong. All the questions just showed up in one long list for me. It did not make much sense, and you know, when you have just started a new job, you really want to show that you are on top of things. I had to get my friend to come over and help. She told me there was a little icon next to each question that showed whether I got it right or not. But unfortunately, my screen reader could not pick that up."
This section gives some examples of the issue.
In this example, the :after pseudo-element is used to insert information about whether the user has answered a set of questions correctly. Because the information is added using CSS, users who access the page with a screen reader or use custom CSS stylesheets might miss this information.
<html lang="en">
<head>
<title>Your test results</title>
<style>
.correct:after {
content: "✔️";
color: green;
font-size: 1.2em;
position: absolute;
right: -30px;
top: 0;
}
.incorrect:after {
content: "X";
color: red;
font-size: 1.2em;
position: absolute;
right: -30px;
top: 0;
}
li {
position: relative;
padding: 10px;
font-size: 1.2em;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>Receptionist Questions</h1>
<ul>
<li class="correct">How should you welcome a guest upon arrival?</li>
<li class="incorrect">What is the best way to handle a dissatisfied guest?</li>
<li class="correct">What is the correct procedure for answering a phone call at the reception?</li>
<li class="correct">How can you ensure that a guest's personal information is handled securely?</li>
<li class="correct">What is an important quality to be a good receptionist?</li>
<li class="correct">How do you ensure that meeting rooms are properly prepared before a meeting?</li>
<li class="incorrect">What should you do if an important delivery arrives while the reception is busy?</li>
</ul>
</body>
</html>In this example, the key information about whether the user has answered questions correctly or not is now included as <img> elements with alt text in the HTML code. Since this information is now part of the HTML code rather than the CSS code, it is more accessible than in the previous example, where the information was added via the :after pseudo-element in CSS.
<html lang="en">
<head>
<title>Your test results</title>
<style>
li {
position: relative;
padding: 10px;
font-size: 1.2em;
margin-bottom: 10px;
display: flex;
align-items: center;
}
.status-icon {
margin-left: 10px;
width: 1.5em;
height: 1.5em;
}
</style>
</head>
<body>
<h1>Receptionist Questions</h1>
<ul>
<li class="correct">How should you welcome a guest upon arrival?
<img src="checkmark.png" alt="Correct" class="status-icon">
</li>
<li class="incorrect">What is the best way to handle a dissatisfied guest?
<img src="crossmark.png" alt="Incorrect" class="status-icon">
</li>
<li class="correct">What is the correct procedure for answering a phone call at the reception?
<img src="checkmark.png" alt="Correct" class="status-icon">
</li>
<li class="correct">How can you ensure that a guest's personal information is handled securely?
<img src="checkmark.png" alt="Correct" class="status-icon">
</li>
<li class="correct">What is an important quality to be a good receptionist?
<img src="checkmark.png" alt="Correct" class="status-icon">
</li>
<li class="correct">How do you ensure that meeting rooms are properly prepared before a meeting?
<img src="checkmark.png" alt="Correct" class="status-icon">
</li>
<li class="incorrect">What should you do if an important delivery arrives while the reception is busy?
<img src="crossmark.png" alt="Incorrect" class="status-icon">
</li>
</ul>
</body>
</html>The Optimize platform highlights cases where pseudo-elements :before or :after are used to add informative content.
To fix this issue, you should update your code so that important information is not added using :before and :after pseudo-elements. Instead, include the information directly as text or images with accessible text alternatives in your HTML code, as shown in the examples above.
Try turning off CSS styles with the Optimize Browser Extension. This helps you see what information your users might be missing when content is added with the :before or :after pseudo-elements.
Common browsers offer features to disable CSS styles through their developer tools. Alternatively, there are browser plug-ins that provide this functionality.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Mon Dec 02 2024 10:44:41 GMT+0000 (Coordinated Universal Time)