【问题标题】：How to get screen reader from reading inline span elements separately?如何让屏幕阅读器分别阅读内联跨度元素？
【发布时间】：2019-10-16 18:23:15
【问题描述】：

我有以下段落：

<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> 内的文本，然后是该段落的其余部分。

结果：

期望的结果：

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

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

【问题讨论】：

嗯，有趣的一个。你试过role="presentation"吗？
很遗憾，这没有用。
如果不尊重这一点或role="none" ，那么可能是时候在他们自己的描述中注意他们的免责声明，以获得更全面的标准合规性； - “对于更全面的解决方案，我们建议使用全系统屏幕阅读器，例如 ChromeVox 在 Chrome 操作系统上、Mac 上的 VoiceOver、JAWS、NVDA 或 Windows 上的讲述人等。”
似乎是 ChromeVox 错误，我首选的屏幕阅读器（适用于 Windows 的 JAWS）可以正常阅读。请不要过度使用presentation角色！

【解决方案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 标记上使用，因为它会改变它以使其行为与任何其他元素一样）

【讨论】：