CODEWITHSUNDEEP
csssection508
Tim
Tim

Reputation: 3806

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

Please consider the following HTML 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 the field a screen reader will read out: Email Address required "star". I'd like to use CSS only to display a visual *, but I don't want that read by screen readers. Is this possible?

Or is this scenario common enough that screen readers and users would ignore the star or adjust the settings. I.e., is this not a real problem?

Upvotes: 37

Views: 17465

Answers (6)

V S Vuca
V S Vuca

Reputation: 39

make a css classs with atribute speak:never

Upvotes: -1

Cleber F. Sant&#39;ana
Cleber F. Sant&#39;ana

Reputation: 179

There's this syntax where one can set the alt text for pseudo elements using slash as delimiter. We can leave it blank to indicate the element should be ignored (the same way it is usually done with img tags), like this:

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

This source indicates there was an 'okay' browser support on 2020. I've tested in Chrome with VoiceOver on MacOS and it works now (as opposed to what the table indicates), so hopefully support may already be very good by now.

https://a11ysupport.io/tests/tech__css__css_generated_content_alt

Upvotes: 9

dashdashzako
dashdashzako

Reputation: 1346

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:

<html lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>What a beautiful day!</title>
  <style type="text/css">
  body {
    counter-reset: headers;
  }

  h2::before {
    counter-increment: headers;
    content: counter(headers, upper-roman);
    speak: none;
  }
  </style>
</head>
<body>
  <h2>Early morning</h2>
  <h2>Lunch</h2>
  <h2>Before dinner</h2>
</body>
</html>

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

Voice Over on Firefox 59 result for CSS speak: none property

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.

Upvotes: 4

Warre Buysse
Warre Buysse

Reputation: 1345

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>

Upvotes: 7

Sam
Sam

Reputation: 916

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/

Upvotes: 14

Adam Hughes
Adam Hughes

Reputation: 2277

If you use a separate span for your icon you could apply an aria hidden tag to prevent screenreaders from reading it. I'm not sure what the support is for this though.

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

More info in the W3C spec

Upvotes: 1

Related Questions