工具提示屏幕閱讀器將讀取的文字，但文字在視覺上保持隱藏

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;
}