时间戳

首页 > 解决方案 > 屏幕阅读器未阅读工具提示气泡消息

handlebars.js - 屏幕阅读器未阅读工具提示气泡消息

问题描述

我试图让我的 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 模板。

标签： handlebars.jsaccessibility

解决方案

我对 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>您的代码将与屏幕阅读器一起工作。

推荐阅读