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

时间:2018-09-21 20:50:40

标签: handlebars.js accessibility

我正在尝试让我的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模板。

1 个答案:

答案 0 :(得分:0)

我对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>,那么您的代码将非常适合屏幕阅读器。