使屏幕阅读器阅读跨度文本的正确方法是什么

Question

我是可访问性的新手，我有一个包含如下文本的跨度

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

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

我最终得到了类似下面的结果，但仍然无法正常工作（我在 Chrome 上进行了测试，使用 JAWS 屏幕阅读器）

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

让屏幕阅读器阅读跨度文本的最佳做法是什么？

更新完整 html

<section _ngcontent-lfb-c4="" class="toolbar">

  <dx-button _ngcontent-lfb-c4="" class="maximizing-button dx-button dx-button-normal dx-button-mode-contained dx-widget dx-button-has-icon" ng-reflect-element-attr="[object Object]" ng-reflect-icon="material-icons mat-fullscreen" role="button" aria-label="Maximize Widget" tabindex="0" aria-pressed="false">
        <div class="dx-button-content"><i class="dx-icon material-icons mat-fullscreen"></i></div>
    </dx-button>

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

    <span _ngcontent-lfb-c4="" class="toolbar-right">
      <span _ngcontent-lfb-c1="" class="total-account-value-info" role="note" tabindex="3" toolbar-right="">
       (Total Account Value is as of the end of last business day)
      </span>
    </span>

</section>

Answer 1

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

问题在于tabindex="4" ，实际上这会以某种方式改变选项卡的顺序。 所以我将其设置为0并且我的问题已解决。

tabindex=0

当tabindex设置为0时，元素会根据其在源代码中的位置插入到 tab 顺序中。 如果默认情况下元素是可聚焦的，则根本不需要使用tabindex ，但是如果您要重新利用<span>或<div>之类的元素，则tabindex=0是将其包含在 tab 顺序中的自然方式。

tabindex=-1

当tabindex设置为负 integer （如-1 ）时，它会以编程方式聚焦，但不包含在 tab 顺序中。 换句话说，使用 tab 键浏览内容的人无法访问它，但可以通过脚本专注于它。

tabindex>=1

当tabindex设置为正 integer 时，事情就会出现问题。 它对与预期的 tab 顺序没有相似之处的内容强加了一个 tab 顺序。