How is CSS pseudo content treated by screen readers?
CSS pseudo element content, either
:after, must only be used for decorative purposes. If you insert meaningful content using a
: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
:after when you can, even for decorative content. Some assistive technologies will attempt to announce it, adding confusion. If you do use
:after, make sure you thoroughly test your implementation to ensure everything sounds ok when using AT.
Free Tools to Continue Learning
Accessible Web RAMP
Monitor your website and manage your progress towards WCAG conformance.
Accessible Web Academy
Career specific courses to help power up your accessibility knowledge.