Can i prevent :after pseudo element from being read by screen readers?

Question

Please consider the following markup:

Email Address Required         


        

Answer 1

Gonna throw this out here as there's no final answer highlighted and it's a much discussed topic.

The above solution given by @Sam will be in the near future the best option to go for. No browsers thus far that have the @media aural, speech media query so, if you provide it, it will only work in the near future.

Is there any other way to hide pseudo elements from screen readers?

Yes, with limits. You can use the "private use Unicode character set". Because the characters are private use, screen readers cannot pronounce them and therefore ignore the character.

If that's not an option try to stick to or elements with aria-hidden="true" on them. It's not as clean as pseudo elements, but at least you have full control of the content.

    Label