使屏幕閱讀器閱讀跨度文本的正確方法是什么

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 順序。