发表新帖
发表新帖

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

前端 未结
关注
4 792
自闭症患者
自闭症患者 2021-02-12 11:28

Please consider the following markup:

相关标签:
4条回答
  • 你的背包
    2021-02-12 11:45

    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.

    0 讨论(0)
  • 终归单人心
    2021-02-12 11:59

    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

    0 讨论(0)
  • 轻奢々
    2021-02-12 12:07

    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/

    0 讨论(0)
  • 孤城傲影
    2021-02-12 12:12

    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>
    0 讨论(0)
 看不清?
提交回复
热议问题