如何让屏幕阅读器单独读取内联<span>元素？

Question

我有以下段落：

<p>Random text that has <span class="font--bold">some bold text</span> and continues on...</p>

我正在使用ChromeVox 扩展程序来确保我的网站是无障碍的。由于所使用的字体类型的特性，我需要使用一个单独的<span class =“font--bold”>元素使该文本变粗体。

我的问题是，当我使用ChromeVox导航到这个段落时，它会依次聚焦并读取<span>之前的文本，然后是<span>内的文本，最后是段落的剩余部分。

结果：

• 我进入了<p>元素。
• ChromeVox 聚焦并读取：“Random text that has”。
• 我导航到下一个项目。
• ChromeVox 聚焦并读取：“some bold text”。
• 我导航到下一个项目。
• ChromeVox 聚焦并读取<p>中的其余文本。

期望的结果：

• 进入段落元素。
• ChromeVox 聚焦整个段落，并大声朗读出来。

---

当此格式用于标题标记内(例如<h2><span class="font--bold">My</span> title</h2>)时，没有问题。ChromeVox将其作为一个部分读出来。

我已经尝试在<span>元素中添加role=“text”和tabindex=“-1”，但是这并没有起作用。非常感谢您的帮助。谢谢。

- Sam Sverko

---

嗯，有趣的问题。你试过使用 role="presentation" 吗？ - Chris W.

很遗憾，那没起作用。 - Sam Sverko

如果它没有遵守role="none"或其他规则，那么现在可能是时候注意他们在自己的描述中的免责声明以获得更全面的标准合规性了。"对于更全面的解决方案，我们建议使用完整的系统屏幕阅读器，如Chrome OS上的ChromeVox，Mac上的VoiceOver，Windows上的JAWS、NVDA或Narrator等。" - Chris W.

似乎是ChromeVox的一个bug，我的首选屏幕阅读器（Windows的JAWS）可以正常读取它。而且，请不要过度使用“presentation”角色！ - Andre Polykanine

Answer 1

role="text"标签

有时候最简单的答案是最好的，你需要寻找role="text"标签。

<p>Random text that has <span class="font--bold" role="text">some bold text</span> and continues on...</p>

注意事项

role="text"会从元素中删除所有语义含义，因此请确保谨慎使用（例如，不要在h1标签上使用，因为它将使其行为类似于其他任何元素）

- GrahamTheDevRel