我使用 Bootstrap 创建了一个页面,其中包含下一页和上一页链接的标准布局。在第一页上,我禁用了“上一页”链接,如下所示:
<div role="navigation">
<ul class="pager">
<li class="previous disabled" aria-disabled="true">
<a href="#">Previous page</a>
</li>
<li class="next">
<a href="search.php?page=2">Next page</a>
</li>
</ul>
</div>
似乎屏幕阅读器(JAWS、NVDA 和 VoiceOver)没有看到 aria-disabled="true"
标志,即使 W3C WAI-ARIA spec状态:
The state of being disabled applies to the current element and all focusable descendant elements of the element on which the aria-disabled attribute is applied.
如果我将 aria-disabled="true"
添加到链接中:
...
<li class="previous disabled" aria-disabled="true">
<a href="#" aria-disabled="true">Previous page</a>
</li>
...
然后它如我所愿地工作,屏幕阅读器将链接描述为“已禁用”。
我是否误解了 WAI-ARIA 规范,或者这是屏幕阅读器实现的“功能”?在 his comment on 'How do i tell a screen reader that a link is disabled' , Bryan Garaventa提及:
... the use of aria-disabled works best for elements that have a defined role, such as role=button.
能否aria-disabled
仅应用于可聚焦元素?
最佳答案
对于 JAWS 16,IE 和 Chrome 都存在您描述的问题,但 FF 38 可以正常工作(不确定以前版本的 FF)。当我跳转到 <li>
所在的链接时有aria-disabled="true"
<a>
上没有 aria-disabled="true", FF 38 和 JAWS 16 表示“上一页不可用链接”。
它实际上并没有阻止我激活该链接,因为这不是 aria-disabled 的用途,但 JAWS 似乎知道子元素被禁用是因为父元素被禁用。
它也适用于 iPad2 上 iOS 8.3 的 VoiceOver。 VO 说“上一页变暗链接”
在这种情况下,您可能必须决定是否保留格式正确的 html 并让用户代理修复错误,或者您是否应该尝试围绕该问题进行编码,在您的情况下是禁用 aria-disabled在链接本身上。
关于html - aria-disabled 只能应用于可聚焦元素吗?它不也适用于子元素吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30227132/