我可以阻止:屏幕阅读器读取伪元素后？

Question

请考虑以下标记:

<label class="required" for="email-address">Email Address <span class="audible">Required</span></label>
<input type="text" id="email-address" placeholder="Company@address.com">

随之而来的是我有以下的CSS ...

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

当我关注一个字段时,屏幕阅读器会显示:电子邮件地址需要"星号".我希望能用css做这个只是为了显示视觉效果*但是我不希望屏幕阅读器阅读？

或者这是一个常见的事情,屏幕阅读器和用户会忽略星形或设置设置.IE不是一个真正的问题吗？

有什么办法吗？

Answer 1

试试这个,它通过媒体查询瞄准屏幕阅读器并隐藏明星

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

更新:

由于对我的初始解决方案的支持似乎并不那么好,我想到了一个替代方案.在我看来,确保屏幕阅读器无法读取(没有额外标记)的唯一方法就是根本没有星号!但是你可以用css添加一个看起来像星号的图像:

.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

在这种语法中，人们可以使用斜杠作为分隔符来设置伪元素的替代文本。我们可以将其留空以指示应忽略该元素（与通常使用 img 标签的方式相同），如下所示：

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

该消息来源表明 2020 年有“良好”的浏览器支持。我已经在 MacOS 上使用 VoiceOver 在 Chrome 中进行了测试，它现在可以工作（与表中所示相反），所以希望现在支持可能已经非常好。

https://a11ysupport.io/tests/tech__css__css_ generated_content_alt

Answer 3

由于没有突出显示最终答案，因此这里将其排除在外，这是一个讨论很多的话题。

@Sam提供的上述解决方案将在不久的将来成为最佳选择。到目前为止，还没有浏览器可以@media aural, speech查询媒体，因此，如果您提供媒体查询，它只会在不久的将来起作用。

还有其他方法可以从屏幕阅读器中隐藏伪元素吗？

是的，有限制。您可以使用“ 私有使用Unicode字符集 ”。由于这些字符是私人使用的，因此屏幕阅读器无法发音，因此会忽略该字符。

如果那不是一个选择，请尝试坚持<span>或坚持其中的<i>元素aria-hidden="true"。它不像伪元素那么干净，但是至少您可以完全控制内容。

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