Alternative Text for CSS Generated Content | Adrian Roselli

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: label.required::before { content: url(star.png); } For this to…

Accessibility


5 stars; 93% of tests passed.
Errors
Level ALevel AALevel AAAUnique
149112117157

Error data courtesy of Tenon.io