CSS pseudo-elements like ::before and ::after can insert content that becomes part of an element's accessible name, but this content may not be properly announced by screen readers. The CSS Generated Content Module Level 3 now allows alternative text to be specified after a slash in the content property, enabling developers to provide descriptive text for meaningful content or hide decorative content from assistive technologies. However, meaningful content should still be placed in HTML rather than CSS, as CSS-generated content has limitations including lack of translation support, invisibility in reader modes, and non-searchable text.
Table of contents
CSS pseudo-content in the accessible name computation algorithmAlternative text for CSS generated contentCSS alt text in browsers todayYes, but: Don’t use CSS to insert meaningful content and imagesSo, what should you do instead?Does this mean that alt text in CSS isn’t useful?Summary and outroRecommended readingContinue learningCommentsSort: