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

Question

我是辅助功能的新手，我有一个包含如下文本的跨度

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

默认情况下，屏幕 reader 不会停在我的跨度上，也不会阅读它，所以我用谷歌搜索并搜索了 SO，但是 none 的解决方案有效

我最终得到了如下所示的结果，但仍然无法正常工作（我在 Chrome 上使用 JAWS 屏幕 reader 进行了测试）

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

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

更新完整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 设置为像 -1 这样的负整数时，它可以通过编程方式获得焦点，但不包含在 Tab 键顺序中。换句话说，无法通过使用 tab 键浏览内容的人访问它，但可以通过脚本对其进行关注。

`tabindex>=1`

当 tabindex 设置为正整数时，问题就来了。它对与预期的 Tab 键顺序毫无相似之处的内容强加了 Tab 键顺序。

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

What is the correct way to make screen reader read span text

html

accessibility

web-accessibility

更新完整html

`tabindex=0`

`tabindex=-1`

`tabindex>=1`