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.

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.