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
https://developer.mozilla.org/en-US/docs/Web/CSS/content#browser_compatibility
-
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.
https://adrianroselli.com/2020/10/alternative-text-for-css-generated-content.html#Takeaways
-
@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