如何通过分别读取内联跨度元素来获得屏幕阅读器？

Question

我有以下段落：

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

我正在使用ChromeVox extension以确保可以访问我的网站。根据所使用的字体类型的性质，我需要使用单独的<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”标签

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

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

旁注
[role="text"将删除元素中的所有语义，因此请确保小心使用（即，不要在h1标签上使用，因为它会更改其行为使其与其他任何元素一样）]