使用aria- descripbedby和一个仅限屏幕阅读器的元素,不被某些屏幕阅读器读出



我试图给屏幕阅读器用户一些额外的信息关于链接列表和它们代表什么。

而不是在<ul>上放一个咏叹调标签,我知道这是不鼓励的,我在适当的地方放了一个屏幕阅读器元素。然后我使用aria-describedby将这个元素和这个元素绑定在一起。

<span id="describer" aria-hidden=true> I'm a screenreader only element hidden with CSS</span>
<ul aria-describedby="describer">...</ul>

这似乎被建议为aria-describedby的正确使用,它在OSX上使用VoiceOver时工作得很好。当用户导航到<ul>时,将读出描述符文本。

然而,它不能在NVDA上工作,也不能在VoiceOver iOS上工作,或者在Android上的TalkBack。它不读出屏幕阅读器,只读出文本。

我正在努力寻找一个解决方案,满足主要的屏幕阅读器(VO, NVDA, TalkBack, JAWS)。

我做错了什么?

当一个元素具有aria-hidden=true时,它将完全从可访问性树中删除,就好像它对屏幕阅读器根本不存在一样。

aria-describedby属性中,您引用的元素应该不在可访问性树中。所以你显然创造了一个未定义的行为。有些屏幕阅读器会认为aria-hidden=true比aria-describedby强,因此会表现得好像它不存在,而其他一些屏幕阅读器会认为aria-describedby更强,并读取描述,尽管它应该是隐藏的。

这不是很清楚为什么你会做你的例子。如果元素应该是其他内容的描述,为什么要从可访问性树中隐藏元素呢?那你一开始为什么要藏起来?

另外,aria-describedby,就像aria-labelaria-labelledby一样,当应用于非交互式元素时,可能不适用于所有的屏幕阅读器。对于普通用户和屏幕阅读器用户来说,在非交互式元素上呈现不同内容的最安全选择是使用视觉隐藏文本,如:

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

你会在流行的框架中找到相应的sr_onlyCSS类,有时被称为visually-hiddenscreenreaderscreen-reader

最新更新