---
title: "Is there non-decorative content in pseudo classes?"
date: "2024-10-25T03:59:33+00:00"
summary: "Learn how to avoid using pseudo-elements for non-decorative content, ensuring accessibility for all users, including those with visual impairments."
image:
type: "page"
url: "/web-governance/there-non-decorative-content-pseudo-classes"
id: "2b5be717-562c-4866-9b74-b5a7bcc58263"
---
Table of contents will be added
1.3.1 Info and Relationships
Introduction
------------
This document provides information about the related accessibility checks:
* Is there non-decorative content in pseudo classes?
What
----
Text characters that convey information to users should not be added using the `::before` and `::after` pseudo-elements.
Why
---
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.
Who
---
### Affected users
This check affects the following users who have:
* Visual impairments: These users and others who access the site contents with a screen reader or screen magnification software.
* Reading or concentration difficulties: These users often use custom CSS to make it easier to read or focus on page content.
### User story
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."_
Examples
--------
This section gives some examples of the issue.
### Example: The `:after` pseudo element used to convey information
* 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.
Your test results
Receptionist Questions
- How should you welcome a guest upon arrival?
- What is the best way to handle a dissatisfied guest?
- What is the correct procedure for answering a phone call at the reception?
- How can you ensure that a guest's personal information is handled securely?
- What is an important quality to be a good receptionist?
- How do you ensure that meeting rooms are properly prepared before a meeting?
- What should you do if an important delivery arrives while the reception is busy?
### Example: The `:after` pseudo element is no longer used to convey information
* In this example, the key information about whether the user has answered questions correctly or not is now included as `![]()
` 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.
Your test results
Receptionist Questions
- How should you welcome a guest upon arrival?
- What is the best way to handle a dissatisfied guest?
- What is the correct procedure for answering a phone call at the reception?
- How can you ensure that a guest's personal information is handled securely?
- What is an important quality to be a good receptionist?
- How do you ensure that meeting rooms are properly prepared before a meeting?
- What should you do if an important delivery arrives while the reception is busy?
How
---
This section provides instructions on how to identify and fix this issue.
### How to identify it
The Acquia Web Governance platform highlights cases where pseudo-elements `:before` or `:after` are used to add informative content.
#### How to fix it
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.
_Tip:_
Turn off CSS styles with the Acquia Web Governance Browser Extension. This makes it easier for users to identify information that they might miss 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.
Additional resources
--------------------
### **WCAG success criteria**
[1.3.1 Info and Relationship](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships)