Is it an okay practice to rely on `content: "#" / ""` for hiding garbage content from screen readers?
-
Zach Leatherman :11ty:wrote last edited by [email protected]
Is it an okay practice to rely on `content: "#" / ""` for hiding garbage content from screen readers? Browser support looks relatively new so I am guessing it’s a no
content - CSS: Cascading Style Sheets | MDN
The content CSS property replaces content with a generated value. It can be used to define what is rendered inside an element or pseudo-element. For elements, the content property specifies whether the element renders normally (normal or none) or is replaced with an image (and associated "alt" text). For pseudo-elements and margin boxes, content defines the content as images, text, both, or none, which determines whether the element renders at all.
MDN Web Docs (developer.mozilla.org)
-
Mayankreplied to Zach Leatherman :11ty: last edited by
@zachleat you can add a fallback declaration:
```
content: "#";
content: "#" / "";
```this works best when the fallback experience is considered acceptable, which i think it would be in this case.
(usual caveats around testing manually to make sure there is no unexpected behavior)
-
@zachleat Haven't tested or anything, but my understanding is that it's not ready for prime-time as far as reliably announcing generated content, but removing it? The results could be inconsistent announcements and different impacts to the accName.
Alternative Text for CSS Generated Content
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…
Adrian Roselli (adrianroselli.com)
-
@geoff thank you for your perspective! I ended up rolling with an aria-hidden="true" element instead.
-
Zach Leatherman :11ty:replied to Mayank last edited by
@mayank hmm—pseudo-element text is typically included with screen-reader text, correct? https://adrianroselli.com/2019/02/f87-css-generated-content-and-wcag-conformance.html points to https://a11ysupport.io/tech/css/generated_content
For this particular use case, I just swapped to use an element with aria-hidden instead—was easier than relying on this.
-
Mayankreplied to Zach Leatherman :11ty: last edited by
@zachleat yes, it is part of the accessibility tree. the point of a fallback declaration is so that it doesn't completely break the experience for everyone on older browsers.
and yes, it's generally best to rely on HTML for content, but tbh i would combine both of these techniques for extra safety (i've heard of `aria-hidden` failing in some cases when used with pseudo-elements).
-
Zach Leatherman :11ty:replied to Mayank last edited by
@mayank ah, yeah—fair! For what it’s worth—I decided against using pseudo elements here