Question

我正在尝试让我的ChromeVox屏幕阅读器读取当用户切换到工具提示图标时弹出的气泡消息，但是没有，并且文档不清楚我认为应该拥有的内容是一个简单的解决方案。

这是我试图重构的文件中的代码，以使屏幕阅读器读取工具提示：

<div class="sub-item content-spaced">
      <span class="text" tabindex="0">{{translations.taxEstLabel}}</span>
      {{#hasEstimatedTax}}
        <span class="value" tabindex="0">{{totalEstimatedTax}}</span>
      {{/hasEstimatedTax}}
      {{^hasEstimatedTax}}
        <div class="tooltip" role="tooltip" tabindex="0" data-info-text="{{translations.taxEstMessage}}"></div>
      {{/hasEstimatedTax}}
    </div>

顺便说一下，这是一个Handlebarjs模板。

Answer 1

我对Handlebarjs不熟悉，但是您的<div>作为工具提示在<div>和</div>之间似乎没有任何文本。 div获得焦点时，是否在文本之间插入了文字？如果插入了文本，我猜是div何时获得焦点，屏幕阅读器会宣布div中当前有什么（什么都没有），然后运行您的js代码以注入文本。

如果这是它的工作原理，则可以将aria-live="polite"添加到div中。这样一来，屏幕阅读器就可以读取div中的所有文本更改。

<div aria-live="polite" class="tooltip" role="tooltip" tabindex="0" data-info-text="{{translations.taxEstMessage}}"></div>

作为附带的问题，为什么您的<span>和<div>元素具有tabindex="0"？我知道tabindex将允许键盘焦点移到该元素上，但是通常您不应该在非交互式元素上设置tabindex。如果您添加tabindex的唯一目的是允许屏幕阅读器在文本上添加标签，以使他们可以听到正在阅读的文本，则没有必要。屏幕阅读器用户可以使用各种屏幕阅读器快捷键导航到DOM中的每个元素，例如“ H”转到下一个标题，“ T”转到下一个表，“ L”转到下一个列表，等等。如果您的html使用的是语义元素，例如<h2>，<table>和<ul>，那么您的代码将非常适合屏幕阅读器。

屏幕阅读器未阅读工具提示气泡消息

1 个答案: