 alt text in #CSS generated `content` is now supported all modern browsers (as of firefox 128 and safari 17.4) please hide your weird glyphs and icon fonts using an empty string like this: ``` https://developer.mozilla.org/en-US/docs/Web/CSS/content#alternative_text 12 comments
@anniegreens this is the kind of shit that seems so insignificant but i care about it 100x more than view transitions or whatever @mayank @anniegreens I agree, so thank you for the PSA; TIL! having said that, MDN's explanation there seems a little less than straightforward (or perhaps I'm overthinking it), so just to clarify: when using `content` to inject purely decorative symbols, adding `/ ""` advises assistive technologies to ignore/skip that visual part (equivalent to `<img alt="">`)? @FND yes, exactly! there's some good information in https://adrianroselli.com/2020/10/alternative-text-for-css-generated-content.html @mayank alright, so I was overthinking it 😅 thank you for confirming if I may point out a tangentially related challenge, I've just had to realize that things are a bit more complicated in combination with `attr()` fallback values: https://prepitaph.org/wip/accessible-generated-content/ (at least I don't think there's a good way to avoid those additional permutations for now)  @FND @mayank I use it for special/external links for a clear visual communication: 🔗 :mastodon: https://chaos.social/@kubikpixel/111748723740511343  @mayank oh my goooood I finally have a more thorough fix than slapping aria-hidden on all of our icons??? 🍾 @cvennevik i would probably still do `aria-hidden` but now there's an *additional* safeguard but also i don't really use icon fonts, so i need `aria-hidden` on my svgs anyway @mayank Yeah I won't take out the guardrails we already have (<Icon> element that's aria-hidden by default) but it feels good to have an immediate fix in modern browsers for the hundreds of icons we've yet to fix |
Gregory's Server
@mayank this is really great