Question

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

这就是我所拥有的：

data-info-text

我只希望屏幕阅读器读取GradeGroup.Ontime.max() Grade HeatNumber 150HP 19258 45.8 19259 45.3 19260 35.6 19280 46.0 19281 50.0 19282 46.1 19283 39.5 A100C 19187 47.0 19243 39.8 19244 40.5 19245 37.1 A100X 19261 50.7 LOWO2A100 19215 42.0 19216 40.5 19217 38.4 19237 44.8 19238 43.7 19239 42.7 19240 42.5 19241 45.4 19262 43.4 19263 42.9 19264 43.5属性内的内容，但是看起来屏幕阅读器无法那样工作。因此，我尝试创建一个内部带有文本的span元素，但在视觉上隐藏了span元素，但这隐藏了屏幕阅读器中的消息，因此无法读取它。

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

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

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

1 个答案: