问题
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?
回答1:
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
回答2:
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:
- VoiceOver sometimes says "unpronouncible";
- Maybe tomorrow your unrecognized character will become recognized
- Users can register special characters in their pronunciation dictionary
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.
来源：https://stackoverflow.com/questions/47438877/how-to-hide-css-generated-content-from-screen-readers-without-html-markup