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

Question

Please consider the following markup:

Email Address Required         


        

Answer 1

Right now I think there only exists either workarounds like using a combination of HTML elements and aria-hidden, or limited support from browsers that implement the CSS3 speech module. Note that this module is still at Candidate Recommandation level, but should provide a more accurate control on what should be read aloud or not.

If browser support was perfect, a good answer would be:

Use CSS3 speech module.

But yeah, this is the Web, and browser support isn't perfect, so I'd recommend using some combination of span with aria-hidden="true" even 4 years after this question was asked.

But one should know that although the aria-hidden property indeed prevents the element content from being read, it also hides its presence to the user. The difference is subtle, but the speak property will not hide the element presence by mentioning it when saying how many children belong to an element.

For instance, let's consider this code:

  
  
  


  
Early morning
  
Lunch
  
Before dinner

And this is what Voice Over reads for the Lunch element, on a supporting web browser (Firefox 59 here):

It counts the speak: none; element in (pseudo-elements count for one), but doesn't read it alound.

Using aria-hidden leads the element not to be counted at all.

I haven't tried other screen readers, and your mileage may vary.