How is CSS pseudo content treated by screen readers?
Question
I've been told to be aware of CSS pseudo content because of the way it is treated by screen readers. Do you have any guidance?
Answer
CSS pseudo element content, either :before or :after, must only be used for decorative purposes. If you insert meaningful content using a :before or :after pseudo element, it is in violation of success criteria 1.3.1. Due to the inconsistencies in how assistive technologies interpret pseudo elements, they may be either completely ignored or misunderstood, causing confusion for your users.
We recommend avoiding :before or :after when you can, even for decorative content. Some assistive technologies will attempt to announce it, adding confusion. If you do use :before or :after, make sure you thoroughly test your implementation to ensure everything sounds ok when using AT.
