DEV Community


VoiceOver does not read pseudo elements with all: initial

Vesa Piittinen
User centric frontend specialist between "normal" programming and design. Loves perf and minimalism. Prefers HTML, CSS, Web Standards over JS, UX over DX. Hates div disease.
Updated on ・1 min read

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 :)

Discussion (1)

lionelrowe profile image

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