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

Question

我正在尝试让我的ChromeVox屏幕阅读器阅读当用户按Tab键转到工具提示图标时弹出的气泡消息，但它没有，而且那里的文档不是很清楚我认为应该是一个简单的解决方案。

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

<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 的唯一目的是允许屏幕阅读器按 Tab 键转到文本，以便他们可以听到正在阅读的文本，则没有必要。 屏幕阅读器用户可以使用各种屏幕阅读器快捷键导航到 DOM 中的每个元素，例如"H"转到下一个标题，"T"转到下一个表，"L"转到下一个列表等。 如果你的html使用语义元素，如<h2>、<table>和<ul>，那么你的代码将很好地与屏幕阅读器配合使用。