我正在使用 :before
绑定(bind)到特定类的伪元素以在 p
前面添加符号标签,使用这样的 CSS:
td > p.markerclass1:before {
position: absolute;
left: -1rem;
content: '*';
}
我在 Wordpress 主题中使用它,用户可以为
p
选择该类。编辑器中的标记,以便将该符号放在当前段落的左侧。但是,该网站应该可以访问,并且屏幕阅读器(至少是 NVDA,我正在使用它进行测试)正在读取该伪元素和包含的符号,这是我不想要的。但由于该元素不在 HTML 代码中,我无法添加
aria-hidden = 'true'
对屏幕阅读器隐藏它。知道我能做些什么来让屏幕阅读器忽略那些伪元素吗?
最佳答案
知道这是旧的,但最近也不得不回答这个问题和eventually found a better answer to this question
伪元素;替代文本可以在 /
之后指示:
td > p.markerclass1:before {
position: absolute;
left: -1rem;
content: "*";
content: "*" / "";
}
在这种情况下,空白替代文本将导致此内容被忽略。备注 not all browsers support this syntax (在撰写本文时基本上只是基于 Chromium 的浏览器)所以请确保首先添加适用于所有浏览器的后备,并且仅被那些支持这种新语法的浏览器覆盖。否则,如果没有这个回退,像 Safari 之类的浏览器只会忽略无法识别的 CSS 行,并且在您使用
/
时无法显示任何内容。替代文字!
关于css - 隐藏屏幕阅读器的伪元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46815260/