工具提示屏幕 reader 将读取文本，但文本在视觉上保持隐藏

Question

我正在尝试找到一种方法，让屏幕 reader 能够读取工具提示图标内的气泡文本，而无需在浏览器中实际显示文本。换句话说，可以将它显示在屏幕 reader 切换到工具提示图标并阅读文本时出现的气泡内，但到目前为止，屏幕 reader 读取文本的唯一方法是如果我对 DOM 中的文本进行硬编码，如果这有意义的话。

这就是我所拥有的：

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

我只想让屏幕 reader 读取 data-info-text 属性中的内容，但看起来屏幕 reader 不能那样工作。因此，我尝试创建一个包含文本的 span 元素，但在视觉上隐藏了 span 元素，但这从屏幕上隐藏了消息 reader，因此无法阅读。

有什么建议吗？我尝试过不同的东西，但我对辅助功能的世界还是陌生的。

Answer 1

您是否考虑过使用 aria-labelledby 而不是 data-* 属性？您可能必须分配 role 属性，因为您使用的是 div 和 span 元素。

本文概述了 aria-labelledby 的功能和用法： https://developer.paciellogroup.com/blog/2017/07/short-note-on-aria-label-aria-labelledby-and-aria-describedby/

或者，如果您想对有视力的用户隐藏文本，但仍然让屏幕阅读器可以看到它，这通常是通过 CSS 并将文本放置在屏幕外来完成的。

/* -- HTML --*/

<div class="hidden-text">Some Hidden Text.</div>

/* --- CSS --- */

.hidden-text { 
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}

工具提示屏幕 reader 将读取文本，但文本在视觉上保持隐藏

Tooltip screen reader will read text of but text to remain visually hidden

javascript

html

css

accessibility

mustache