Question

我使用Bootstrap创建了一个页面，其中包含下一页和上一页链接的标准布局。在第一页上，我停用了上一页＆＃39;链接如下：

<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状态：

被禁用的状态适用于当前元素和所有元素可聚焦的元素元素的元素应用了aria-disabled属性。

如果我在链接中添加aria-disabled="true"：

    ...
    <li class="previous disabled" aria-disabled="true">
      <a href="#" aria-disabled="true">Previous page</a>
    </li>
    ...

然后它就像我希望的那样，屏幕阅读器将链接描述为“禁用”。

我是否误解了WAI-ARIA规范，或者这是一个＆＃39;功能＆＃39;屏幕阅读器实现？在his comment on 'How do i tell a screen reader that a link is disabled'中，Bryan Garaventa提及：

... aria-disabled的使用最适合具有a的元素定义的角色，例如role = button。

{only}仅可以应用于可聚焦元素吗？

Answer 1

使用JAWS 16，IE和Chrome都有你描述的问题，但FF 38工作正常（不确定以前版本的FF）。当我在<li>，FF 38和JAWS 16上的aria-disabled="true" <a>和 -adid =“true”的链接上说“上一页不可用链接”。

它实际上并没有阻止我激活该链接，因为这不是aria-disabled的用途，但是JAWS似乎知道子元素被禁用，因为父元素已被禁用。

它也适用于ipad2上的iOS 8.3上的VoiceOver。 VO说“上一页变暗链接”

这可能是一种情况，您必须决定是否保留格式正确的html并让用户代理修复该错误，或者您是否应该尝试编写问题的代码，在您的情况下将aria-disabled放入在链接本身。

Answer 2

根据WCAG，“ li”上不允许使用禁用咏叹调的功能元件。直接将其应用于“ a”标签。

咏叹调禁用只能应用于可聚焦元素吗？它是否也适用于子元素？

2 个答案: