How would one hide CSS certain generated content (used for pure styling) from screen reader? Is it possible without using HTML hacks like aria-hidden?
E.g. I use code content: '·'; for separating stuff. I've checked facebook & other big players but they all seem to use spans with aria-hidden:
<span aria-hidden="true">·</span>
Does it mean it’s not possible currently?
For future references, note that according to CSS 3 documentation:
Generated content should be searchable, selectable, and available to assistive technologies. The content property applies to speech and generated content must be rendered for speech output.
It's also stated that :
If the pseudo-element is purely decorative and its function is covered elsewhere, setting alt to the empty string can avoid reading out the decorative element.
This concernes ::before and ::after pseudo-elements; alternative text might be indicated after a /:
.expandable::before {
content: "\25BA" / "";
}
For CSS2, you may use unpronounceable UTF-8 elements in order to be sure that the elements won't be announced.
For instance, when you use the code:
.bullet {
content: "\2022";
}
\2022 (bullet : •) announces "bullet" with NVDA while another code like \2023 (triangular bullet : ‣) announces nothing
The answer is short and simple: it's impossible.
BY the way, CSS-generated contents may or may not be spoken depending on the browser and screen reader used, so you don't know for sure whether it will be spoken or not (don't use this to give important information).
Additionally, about the already answer posted above: you shouldn't rely on the fact that a given character is unrecognized and thus perhaps ignored, for at least three reasons:
It's a personal point of view, but I think that CSS-generated content is a conception defect: it should never be used, and it should never have been invented, according to the base separation principle: Content = HTML, Presentation = CSS, Interactivity = JavaScript.
Sadly it's too late now.
It seems it is intended that pseudo content is read out by screen readers.
Media queries "speech" (deprecated) and "aural" are also not supported, which would have been a way to "hide" pseudo content.
Here is a good overview of what is supported by a big number of screen readers (under "Expected to fail"): https://www.powermapper.com/tests/screen-readers/content/