工具提示屏幕阅读器将读取的文字，但文字在视觉上保持隐藏

Question

我试图找到一种方法，使屏幕阅读器可以在工具提示图标中读取气泡文本，而无需实际在浏览器中显示文本。 换句话说，可以将其显示在屏幕阅读器中跳至工具提示图标并阅读文本时出现的气泡内，但是到目前为止，屏幕阅读器读取文本的唯一方法是如果我将代码硬编码到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>

我只希望屏幕阅读器读取data-info-text属性中的内容，但是看起来屏幕阅读器无法那样工作。 因此，我尝试创建一个内部带有文本的span元素，但在视觉上隐藏了span元素，但这从屏幕阅读器中隐藏了消息，因此无法读取它。

有什么建议吗？ 我尝试了不同的方法，但是我对可访问性世界是陌生的。

Answer 1

您是否考虑过使用aria-labelledby代替data-*属性？ 由于您正在使用div和span元素，因此可能必须分配一个role属性。

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

另外，如果您想向视力不佳的用户隐藏文本，但仍使其可供屏幕阅读器使用，通常可以通过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;
}