Find out how to hide certain CSS-generated content from the screen reader.
Hiding content generated through the
content CSS property isn’t easy out of the box. However, some tricks can be used to achieve that.
Let’s then see the possibilities and limitations.
Sometimes we’d like to add an extra content, but only for decorative purpose. An example could be
<label> where we want to add content
*) in the pseudo element
The code may look like:
This, however, will be read by a screen reader along with an announcement that the form control value is required. See an example output from the VoiceOver screen reader.
As we want to avoid that, we need to find a way to tell the screen reader:
Hey. Don’t read it aloud. It’s just decorative content..
Is there a way to write content that screen readers will ignore?
Yes. Keep reading.
According to CSS Content Module Level 3 documentation:
Generated content should be searchable, selectable, and available to assistive technologies. The
contentproperty applies to speech and generated content must be rendered for speech output.
Reading further in
1.2. Alternative Text for Accessibility:
Content intended for visual media sometimes needs alternative text for speech output or other non-visual mediums. The content property thus accepts alternative text to be specified after a slash (
/) after the last
<content-list>. If such alternative text is provided, it must be used for speech output instead.
This allows, for example, purely decorative text to be elided in speech output (by providing the empty string as alternative text), and allows authors to provide more readable alternatives to images, icons, or text-encoded symbols.
How to hide from the screen reader CSS content defined in pseudo element?
We can define an alternative text specified after a slash (
/) after the last
content: " (required)" / "";
See a workable example of hiding CSS content from screen readers.
At the time of writing this post, the solution worked fine with these configurations:
- MacOS, 13.4.1 (c) (22F770820d), VoiceOver, Chrome Version 115.0.5790.98 (Official Build) (x86_64).
- MacOS, 13.4.1 (c) (22F770820d), VoiceOver, Firefox 115.0.2 (64-bit).
- MacOS, 13.4.1 (c) (22F770820d), VoiceOver, Safari 16.5.2 (18618.104.22.168.10).
- Windows 11 (22H2, OS Build 22621.1992), Narrator, Edge 114.0.1823.82.
- Ubuntu 22.10, Orca 43.0, Chrome 115.0.5790.102 (Official Build)(64 bit).
This is how it is being exposed to Accessibility Tree by Chrome browser, MacOS, 13.4.1 (22F770820d), version 115.0.5790.98 (Official Build) (x86_64):
We have carried out a limited number of tests, and perhaps the solution will not work in every case. If you find a bug, please report it to us. Thank you.