我有以下段落:
<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 聚焦整个段落，并大声朗读。
在 header 标签内使用此格式时没有问题(例如 <h2><span class="font--bold">My</span> title</h2> 。Chromevox 将其作为一个部分读出。
我试过添加 role="text"和 tabindex="-1"进入<span>元素，但这没有用。任何帮助将不胜感激。谢谢。
最佳答案
role="文本"标签
有时最简单的答案是最好的，你正在寻找role="text"
<p>Random text that has <span class="font--bold" role="text">some bold text</span> and continues on...</p>
边注
role="text" 将从元素中删除所有语义，因此请确保谨慎使用它(即不要在 h1 标签上使用，因为它会然后将其更改为与任何其他元素一样)
关于html - 如何让屏幕阅读器分别阅读内联跨度元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58419523/