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

【问题标题】：hide a pseudo-element from a screenreader?隐藏屏幕阅读器的伪元素？
【发布时间】：2017-10-18 16:46:36
【问题描述】：

我正在使用绑定到特定类的:before 伪元素在p 标签前添加符号，CSS 如下：

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

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

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

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

【问题讨论】：

标签： css accessibility pseudo-element screen-readers

【解决方案1】：

知道这是旧的，但最近也不得不回答这个问题和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 行，并且当您使用 / 替代文本时无法显示任何内容！

【讨论】：

【解决方案2】：

您可以尝试使用speak 属性：

CSS：

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

【讨论】：

感谢您的回答！我在 W3C 上找到了一些关于这个的东西，但在 caniuse 上没有。你知道它的浏览器支持吗？
在使用此页面cssportal.com/css-properties/speak.php 进行快速检查后，Chrome、Safari 和 Opera 似乎支持它（仅在 Mac 上试用过），Firefox 和 IE/Edge 不支持...对于我的目的来说还不够...
据我所知，它没有得到很好的支持，唯一的选择是 aria-hidden。如果你能想出一种方法来实现它，连同 speak 属性，它将涵盖所有内容。
@Johannes 我认为另一种解决方案是使用列表并可能添加“ * ”作为您的列表样式，如果您愿意，我可以提供代码。
OP 您是否注意到上述浏览器中使用和不使用该属性的区别？我猜有VO？从未听说过（ha）这种 CSS Aural 媒体属性的实现（以及屏幕阅读器等辅助技术是 screen 阅读器）

【解决方案3】：

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

例如，以下代码将隐藏包括*在内的所有内容

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

如果您不想读取伪元素的内容，则必须使用类似 UTF-8 等价物的不可发音的替换：

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

编辑：\2022 使用 NVDA 宣布“子弹”，而另一个代码（例如 \2023）则不宣布任何内容

【讨论】：

re unpronouncable：是的，我也尝试过，但那样它仍然显示为一个空元素，而不是跳过/忽略，这只是“半可用”但是感谢您的回答！

【解决方案4】：

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

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

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

&lt;a href="mailto:abc@xyz.com" target="_top" aria-label="Send Mail"&gt;Send Mail&lt;/a&gt;

希望这对你们有用。

【讨论】：