我可以防止屏幕阅读器读取:after伪元素吗? [英] Can i prevent :after pseudo element from being read by screen readers?

问题描述

请考虑以下标记:

<label class="required" for="email-address">Email Address <span class="audible">Required</span></label>
<input type="text" id="email-address" placeholder="[e-mail]">

与此同时，我有以下CSS ...

Along with that i have the following css...

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

当我聚焦一个字段时，屏幕阅读器将显示:电子邮件地址为必需的星号".我希望能够使用CSS做到这一点，只是为了显示视觉效果*，但我不希望屏幕阅读器能够读取该内容?

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?

否则，这是否足够普遍，以致屏幕阅读器和用户将忽略星号或设置设置. IE.不是一个真正的问题吗?

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?

有什么办法吗?

推荐答案

尝试一下，它通过媒体查询定位到屏幕阅读器，并隐藏星号

Try this, it targets screen readers with a media query and hides the star

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

更新:

由于我最初的解决方案的支持程度似乎不太好，因此我想到了一种替代方法.在我看来，确保它不被屏幕阅读器(不带额外的标记)阅读的唯一方法是根本没有星号！但是，您可以添加带有CSS的图像，使其看起来像一个星号，如下所示:

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/

这篇关于我可以防止屏幕阅读器读取:after伪元素吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！