[英]Tooltip screen reader will read text of but text to remain visually hidden
I am trying to find a way that the screen reader will read the bubble text inside of tooltip icon, without actually having to display the text in the browser. 我试图找到一种方法,使屏幕阅读器可以在工具提示图标中读取气泡文本,而无需实际在浏览器中显示文本。 In other words, its okay to display it inside the bubble that appears when the screen reader tabs over to the tooltip icon and reads the text, but so far the only way screen reader will read the text is if I hard code the text in the DOM if that makes sense.
换句话说,可以将其显示在屏幕阅读器中跳至工具提示图标并阅读文本时出现的气泡内,但是到目前为止,屏幕阅读器读取文本的唯一方法是如果我将代码硬编码到DOM如果有意义的话。
So this is what I have: 这就是我所拥有的:
<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>
I just want screen reader to read whats inside of data-info-text
attribute, but it looks like the screen reader does not work that way. 我只希望屏幕阅读器读取
data-info-text
属性中的内容,但是看起来屏幕阅读器无法那样工作。 So I tried to create a span element with the text inside, but visually hiding the span element, but that hides the message from the screen reader and thus cannot read it. 因此,我尝试创建一个内部带有文本的span元素,但在视觉上隐藏了span元素,但这从屏幕阅读器中隐藏了消息,因此无法读取它。
Any suggestions out there? 有什么建议吗? I have tried different things but I am new to the world of accessibility.
我尝试了不同的方法,但是我对可访问性世界是陌生的。
Have you considered using aria-labelledby
instead of data-*
attributes? 您是否考虑过使用
aria-labelledby
代替data-*
属性? You may have to assign a role
attribute, since you're using div
and span
elements. 由于您正在使用
div
和span
元素,因此可能必须分配一个role
属性。
This article gives an overview of the functionality and usage of aria-labelledby
: https://developer.paciellogroup.com/blog/2017/07/short-note-on-aria-label-aria-labelledby-and-aria-describedby/ 本文概述了
aria-labelledby
的功能和用法: https : //developer.paciellogroup.com/blog/2017/07/short-note-on-aria-label-aria-labelledby-and-aria- aria-labelledby
/
Alternatively, if you want to hide text from sighted users, but still make it available to screen-readers, that's typically done via CSS and positioning the text off-screen. 另外,如果您想向视力不佳的用户隐藏文本,但仍使其可供屏幕阅读器使用,通常可以通过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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.