[英]Using aria-describedby and a screenreader-only element, not read out by some screenreaders
I am attempting to give screenreader users some additional information about a list of links and what they represent.我试图向屏幕阅读器用户提供一些有关链接列表及其代表内容的附加信息。
Rather than putting an aria-label on a <ul>
, which I understand is discouraged, I have put a screenreader only element in place.我没有在<ul>
上放置一个 aria-label,据我所知这是不鼓励的,我已经放置了一个仅用于屏幕阅读器的元素。 I have then bound the and this element together using aria-describedby
.然后我使用aria-describedby
the 和 this 元素绑定在一起。
<span id="describer" aria-hidden=true> I'm a screenreader only element hidden with CSS</span>
<ul aria-describedby="describer">...</ul>
This seems to be suggested as the correct use for aria-describedby
and it works excellently when using VoiceOver on OSX.这似乎被建议为aria-describedby
的正确用法,并且在 OSX 上使用 VoiceOver 时效果很好。 When a user navigates over the <ul>
the describer text is read out.当用户在<ul>
上导航时,会读出描述文本。
However, it does not work on NVDA, nor does it work on VoiceOver iOS, or TalkBack on Android. It does not read out the screenreader only text.但是,它不适用于 NVDA,也不适用于 VoiceOver iOS 或 TalkBack Android。它不会读出屏幕阅读器的纯文本。
I am struggling to find a solution that satisfies the major screenreaders (VO, NVDA, TalkBack, JAWS).我正在努力寻找满足主要屏幕阅读器(VO、NVDA、TalkBack、JAWS)的解决方案。
What have I done wrong?我做错了什么?
When an element has aria-hidden=true
, it's totally removed from the accessibility tree, as if it didn't exists at all for screen readers.当一个元素具有aria-hidden=true
时,它将完全从可访问性树中删除,就好像它对于屏幕阅读器来说根本不存在一样。
In the aria-describedby
attribute, you are referencing an element supposed to be absent from the accessibility tree.在aria-describedby
属性中,您引用了一个应该在可访问性树中不存在的元素。 So you have obviously created an undefined behavior.所以你显然创建了一个未定义的行为。 Some screen readers will consider aria-hidden=true stronger than aria-describedby
and so will behave as if it didn't exists, while some other screen readers will consider aria-describedby
stronger and read the description although it's supposed to be hidden.一些屏幕阅读器会认为 aria-hidden=true 比aria-describedby
更强,因此会表现得好像它不存在一样,而其他一些屏幕阅读器会认为aria-describedby
更强并阅读描述,尽管它应该被隐藏。
It's not very clear why you would do something as in your example.目前还不是很清楚为什么你会像你的例子那样做某事。 Why do you hide the element from the accessibility tree if it should be a description for something else?如果它应该是对其他内容的描述,为什么要从可访问性树中隐藏该元素? Why do you hide it in the first place then?那你为什么一开始就把它藏起来?
Additionally, aria-describedby
, just like aria-label
and aria-labelledby
, may not work with all screen readers when applied to a non-interactive element.此外, aria-describedby
与aria-label
和aria-labelledby
一样,在应用于非交互式元素时可能不适用于所有屏幕阅读器。 The safest alternative to present different content for normal and screen reader users on non-interactive elements is by using visually hidden text, like this:在非交互式元素上为普通用户和屏幕阅读器用户呈现不同内容的最安全替代方法是使用视觉隐藏文本,如下所示:
<span class="sr_only">This text is read by screen readers, but invisible on screen</span>
<span aria-hidden="true">This text is visible on screen, but ignored by screen readers</span>
You will find the corresponding sr_only
CSS class in popular frameworks, sometimes called visually-hidden
or screenreader
or screen-reader
.你会在流行的框架中找到相应的sr_only
CSS class ,有时称为visually-hidden
或screenreader
或screen-reader
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.