如何让屏幕阅读器单独读取内联跨度元素？

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 聚焦并读取：“随机文本”。
• 我导航到下一个项目。
• Chromevox 聚焦并读取：“一些粗体文本”。
• 我导航到下一个项目。
• Chromevox 聚焦并读取<p>.

期望的结果：

• 导航到段落元素。
• Chromevox 聚焦整个段落，并大声朗读。

---

当此格式在标头标签内使用时没有问题（例如<h2><span class="font--bold">My</span> title</h2>。Chromevox 将其作为一个部分读出。

我尝试过添加role="text"并tabindex="-1"添加到该<span>元素中，但这没有用。任何帮助将不胜感激。谢谢。

Answer 1

角色=“文本”标签

有时最简单的答案就是最好的，您正在寻找role="text"

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

边注

role="text"将从元素中删除所有语义，因此请确保谨慎使用它（即不要在标签上使用，h1因为它会更改它以像任何其他元素一样运行）