Hello,
when making websites (more) accessible, there is sometimes the need to add text that only assistive technologies (AT) like screen readers (SR) can consume, but is not visible in the browser. Hiding content completely or only from AT is simple with one or two rules [1], but hiding it visually without hiding it for AT is a lot more complex. There are slightly different techniques to achieve that [2], but I think they are too cumbersome and also have no semantics. Because there exists no simple primitive for this case, common CSS frameworks have helper classes for this case, e. g. bootstrap has .sr-only, which is 9 rules to achieve its result [3]. I very much like to have a primitive for that, either in HTML or ARIA or CSS (I do not know where it would fit best).
While most people in web development use frameworks nowadays, I still want to web to be as easy as that one can write simple web pages with an editor only. With CSS flex-box and grid it’s now even simpler without relying on a framework. But then I often find myself in need to copy this one helper class to achieve better accessibility.
The goal is to have a simple way to achieve the same effect as these techniques that are common today: visually hidden content should render like display: none, i.e. not take up space, but still be exposed to AT. (It would be nice if there would also be a way to make such content eventually focusable if it is an interactive element or contains one. Adding :focus or :focus-within rules could then re-show it visually like the bootstrap .sr-only-focusable class does, which is used e. g. for skip links. But this of course would behave differently than display: none.)
So my ideas would be to standardize a new HTML or ARIA property or CSS value, e.g.
<span hidden="visually"> or
<span style="display: at-only">
I’ve also read similar sentiments from other webdevs, like “Unfortunately, there’s no native way of hiding content only visually.” [4]
Any ideas/opinions/support?
Thanks
[1] https://allyjs.io/tutorials/hiding-elements.html [2] https://webaim.org/techniques/css/invisiblecontent/ [3] https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss [4] https://www.htmhell.dev/9-cookie-consent-from-hell/