DEV Community

Vesa Piittinen
Vesa Piittinen

Posted on • Updated on

VoiceOver does not read pseudo elements with all: initial

As far as I can tell you can add all: initial; to a regular element with the visually hidden class (.sr-only or whichever name you use), and VoiceOver will read the contents of the element.

However if you use all: initial; on ::before or ::after elements then the element will disappear from screen reader even if other styles would allow reading the pseudo element.

My best guess is that there is a CSS property that gets reverted into a value that does not allow reading the element, but I don't know which one.

Let me know if you know what is behind the phenomenon :)

Top comments (1)

Collapse
 
lionelrowe profile image
lionel-rowe

I was under the impression that pseudo elements are never read by screen readers, regardless of styling. Is this not true for VoiceOver?