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

Question

我正在使用绑定到特定类的

:before

伪元素在

p

标签前面添加符号，CSS如下：

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

我在 WordPress 主题中使用它，用户可以在编辑器中为

p

标签选择该类，以便将该符号放在当前段落的左侧。

但是，该网站应该是可访问的，并且屏幕阅读器（至少是 NVDA，我正在使用它进行测试）正在读取该伪元素和包含的符号，这是我不想要的。但由于此元素不在 HTML 代码中，因此我无法添加

aria-hidden = 'true'

来将其隐藏，不让屏幕阅读器看到。

知道我可以做什么来让屏幕阅读器忽略这些伪元素吗？

Answer 1

知道这已经很旧了，但最近也必须回答这个问题，最终找到了这个问题的更好答案

伪元素；替代文本可以在

/

:

之后指示

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

在这种情况下，空白替代文本将导致该内容被忽略。

注意较旧的浏览器不支持此语法，因此请确保首先添加适用于所有浏览器的后备，并且仅被那些也支持此新语法的浏览器覆盖。否则，如果没有这个后备，旧版浏览器只会忽略无法识别的 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

用NVDA宣布“子弹”，而另一个代码，例如

\2023

则什么也不宣布

Answer 4

该场景是与“单击此处至”文本关联的“发送邮件”链接，但屏幕阅读器会读取整个文本，但我希望它只读取“发送邮件”。

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

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

<a href="mailto:[email protected]" target="_top" aria-label="Send Mail">Send Mail</a>

希望这对你们有用。