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: "*";
      ......
    }

当我对一个字段进行聚焦时，屏幕阅读器会显示：需要电子邮件地址＆＃34; star＆＃34;。我希望能用css做这件事只是为了显示视觉效果*但是我不想让屏幕阅读器读取它？

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

有可能吗？

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

要把它扔出去，因为没有突出显示最终答案，这是一个讨论很多的主题。

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

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

是的，有限制。您可以使用“private use Unicode character set”。由于角色是私人使用，因此屏幕阅读器无法发音，因此忽略了角色。

如果这不是一个选项，请尝试坚持<span>或<i>元素并加上aria-hidden="true"。它不像伪元素那样干净，但至少你可以完全控制内容。

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

Answer 3

如果您为图标使用单独的范围，则可以应用aria隐藏标记以防止屏幕阅读器读取它。我不知道对此有何支持。

<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

Answer 4

现在我认为只存在使用HTML元素和aria-hidden组合的变通方法，或者实现CSS3 speech module的浏览器提供的有限支持。请注意，此模块仍处于Candidate Recommandation level，但应提供更准确的控制，以便大声朗读

。

如果浏览器支持是完美的，那么答案就是：

使用CSS3语音模块。

但是，是的，这是网络，浏览器支持并不完美，因此我建议在提出此问题后4年内使用span与aria-hidden="true"的某种组合。

但是应该知道，虽然aria-hidden属性确实阻止了元素内容的读取，但它也隐藏了它对用户的存在。区别是微妙的，但speak属性不会通过在说明元素属于多少子元素时提及它来隐藏元素存在。

例如，让我们考虑一下这段代码：

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

这就是Voice Over在支持Web浏览器（此处为Firefox 59）上为 Lunch 元素读取的内容：

它计算speak: none;元素（伪元素计数为1），但不会读取它。

使用aria-hidden会导致元素根本无法计算。

我没有尝试过其他屏幕阅读器，你的里程可能会有所不同。

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

4 个答案:

更新