css – 我可以防止:在伪元素被屏幕阅读器读取之后?

前端之家收集整理的这篇文章主要介绍了css – 我可以防止:在伪元素被屏幕阅读器读取之后?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
请考虑以下标记
<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只显示一个视觉*,但我不想要读屏幕阅读器?

否则这是一个常见的事情,屏幕阅读器和用户将忽略星号或设置设置. I.E.不是一个真正的问题?

有什么办法吗?

解决方法

尝试这样,它以屏幕阅读器为媒体查询并隐藏星号
@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/

原文链接:https://www.f2er.com/css/214711.html

猜你在找的CSS相关文章