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

问题

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="Company@address.com">

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?

回答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/

回答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>

回答3:

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="Company@address.com">

More info in the W3C spec

回答4:

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

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.

来源：https://stackoverflow.com/questions/26634156/can-i-prevent-after-pseudo-element-from-being-read-by-screen-readers

标签

css

section508