Alternative Text for CSS Generated Content
October 13, 2020; 5 Comments
Relying on images that come from CSS has always been risky from an accessibility perspective. CSS background images, in particular, must either be purely decorative or be described to the user in some way.
The risk is no different for images coming from CSS generated content using content: url(foo.gif) (typically paired with ::before and ::after). Addressing it is often a bit trickier.
A long time ago using CSS generated content was a WCAG auto-fail. Today using content: to insert plain text can be a boon for users — from browsers using it to present quote marks for rendering <q> to authors relying on it for hints.
Too often, however, I see developers relying on images in the generated content to convey important information to users. The following construct is not uncommon:
For this to convey to a user that the field is required, the image has to load and the user has to be able to see it. If either is not the case, this can be a problem.
CSS Generated Content Module Level 3 (Editor’s Draft) allows an author to specify alternative text for images (referenced through url()) [...]