Question

我正在使用绑定到特定类的:before个伪元素在p标记前添加符号，使用这样的CSS：

td > p.markerclass1:before {
    position: absolute;
    left: -1rem;
    content: '*';
}

我在Wordpress主题中使用它，用户可以在编辑器中为p标签选择该类，以便将该符号放在当前段落的左侧。

然而，该网站应该是可访问的，并且屏幕阅读器（至少NVDA，我正在测试它）正在读取该伪元素和包含的符号，这是我不想要的。但由于此元素不在HTML代码中，因此我无法添加aria-hidden = 'true'以将其隐藏在屏幕阅读器中。

知道如何让屏幕阅读器忽略那些伪元素吗？

Answer 1

知道这很旧，但是最近也必须回答这个问题，eventually found a better answer to this question

伪元素；可以在/之后指示替代文本：

td > p.markerclass1:before {
  position: absolute;
  left: -1rem;
  content: "*";
  content: "*" / ""; 
}

在这种情况下，空白的alt文本将导致忽略此内容。

请注意not all browsers support this syntax（在撰写本文时，基本上只是基于Chromium的浏览器），因此请确保先添加适用于所有浏览器的后备广告，并且仅被支持该新语法的浏览器所覆盖。否则，如果没有这种后退，像Safari这样的浏览器将只忽略无法识别的CSS行，并且在您使用/替代文本时无法显示任何内容！

Answer 2

您可以尝试使用speak属性：

CSS：

td > p.markerclass1:before {
    position: absolute;
    left: -1rem;
    content: '*';
    speak: none;
}

Answer 3

伪元素从主类继承它们对屏幕和屏幕阅读器的可见性。

例如，以下代码将隐藏包括*

在内的所有内容

p:before {content:'*'}
p {display:none}

如果你想要不读取伪元素的内容，你必须使用像UTF-8等效的不可撤销的替换：

td > p.markerclass1:before {
    position: absolute;
    left: -1rem;
    content: "\2022";
}

编辑：\2022宣布＆＃34; bullet＆＃34;使用NVDA而另一个代码如\2023例如什么都不宣布

Answer 4

该方案是与“单击此处到”文本关联的“发送邮件”链接，但是屏幕阅读器读取了整个文本，但我希望它仅读取“发送邮件”。

在这里，我已经使用“ aria-label”属性解决了该问题。

a
{
    text-decoration:none;
}
a::before 
{
    content:"Click here to - ";
    color:Black;
    font-weight:bold;
}

<a href="mailto:abc@xyz.com" target="_top" aria-label="Send Mail">Send Mail</a>

希望这对你们有用。

隐藏屏幕阅读器中的伪元素？

4 个答案: