我使用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>
Run Code Online (Sandbox Code Playgroud)
屏幕阅读器(JAWS,NVDA和VoiceOver)似乎没有看到aria-disabled="true"旗帜,即使W3C WAI-ARIA规范指出:
被禁用的状态适用于当前元素和应用了aria-disabled属性的元素的所有可聚焦后代元素.
如果我添加aria-disabled="true"到链接:
...
<li class="previous disabled" aria-disabled="true">
<a href="#" aria-disabled="true">Previous page</a>
</li>
...
Run Code Online (Sandbox Code Playgroud)
然后它按照我的希望工作,屏幕阅读器将链接描述为"禁用".
我是否误解了WAI-ARIA规范,或者这是屏幕阅读器实现的"特征"?在他的评论"我如何知道的屏幕阅读器的链接已禁用",布莱恩Garaventa公司提到:
...使用aria-disabled最适合具有已定义角色的元素,例如role = button.
可以aria-disabled 仅适用于可聚焦的元素呢?
html5 accessibility screen-readers wai-aria twitter-bootstrap