2

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

<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>
4

1 回答 1

3

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

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

tabindex=0

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

tabindex=-1

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

tabindex>=1

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

于 2019-10-08T17:53:04.470 回答