Html 让屏幕阅读器阅读span文本的正确方法是什么

我是一个新的可访问性，我有一个跨度与文字如下

<span  class="text" >Account Information</span>

账户信息

默认情况下，屏幕阅读器不会在我的span上停止，也不会读取它，所以我在Google上搜索，但没有一个解决方案有效

我最终得到了如下结果，仍然无法工作（我在Chrome上测试了JAWS屏幕阅读器）

账户信息

让屏幕阅读器阅读跨度文本的最佳实践是什么

更新完整的html

帐户信息
（账户总价值截至最后一个营业日结束）

我发现了我的错误，我正在分享，以防其他人也有同样的问题

问题在于

tabindex=“4”

，实际上这会在某种程度上改变选项卡的顺序。所以我把它设置为

0

，我的问题就解决了

tabindex=0

当

tabindex

设置为

0

时，元素将根据其在源代码中的位置插入到选项卡顺序中。如果元素在默认情况下是可聚焦的，则根本不需要使用

tabindex

，但是如果要重新调整元素的用途，如

或

，则

tabindex=0

是将其包含在选项卡顺序中的自然方式

tabindex=-1

当

tabindex

设置为负整数（如

-1

）时，它将以编程方式聚焦，但不包括在选项卡顺序中。换句话说，使用tab键浏览内容的人无法访问它，但可以通过脚本将重点放在它上

tabindex>=1

---

当

tabindex

设置为正整数时，事情就会出现问题。它对与预期的选项卡顺序不相似的内容施加选项卡顺序。

您正在使用什么屏幕阅读器进行测试？您还可以共享整个标记块吗？它是在阅读相邻文本并跳过你的跨度，还是在跨度处停止而不继续？@Lian我使用的是JAWS screen reader v2019，在这个跨度之前有一个按钮，它在按钮读取按钮标签时停止，然后跳过跨度，转到table@Lian我必须使用什么html标记来显示屏幕阅读器可以阅读的文本？我看到你回答了你的问题，但有没有令人信服的理由让span选项卡变为可阅读的？@Lian巧合的是，我发现它实际上得到了关注，但是在所有其他元素和表之后，是的，您永远不应该使用正数tabindex，因为这会破坏页面的顺序。就像您写的-1或0，或者是唯一可能正常工作的选项卡索引。

<span aria-live="assertive" class="text" role="region" tabindex="4" aria-label="Account Information">Account Information</span>