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

Question

Please consider the following markup:

<label class="required" for="email-address">Email Address <span class="audible">Required</span></label>
<input type="text" id="email-address" placeholder="[email protected]">

Along with that i have the following css...

   .required:after {
      color: red
      content: "*";
      ......
    }

When i focus a field a screen reader will read: Email Address required "star". I'd like to be able to do this with css only to display a visual * but i dont want that read by screen readers?

Or otherwise is this a common enough thing that screenreaders and users would ignore the star or set settings. I.E. Not a real problem?

Is there any possible way?

Answer 1

Try this, it targets screen readers with a media query and hides the star

@media reader, speech, aural {
    .required:after {
        display: none;
        visibility: hidden;
    }
}

Update:

As the support for my initial solution doesn't seem to be that good I have thought of a alternative. It occurred to me that the only way to ensure that its not read by a screen reader (w/o extra markup) would be to have no asterisk at all! However you could add a image with css to look like a asterisk like so:

.required:after {
    content:'';
    display: inline-block;
    width: .5em;
    height: .5em;
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/b/b5/Asterisk.svg);
    background-size: .5em .5em;    
    vertical-align: top;
    margin-left: .15em;
    margin-top: .1em;
}

http://jsfiddle.net/3a1dvdag/

Answer 2

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 <span> or <i> 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.

<button type="button">
    <span class="i i-arrow-down" aria-hidden="true">Label
</button>