如何告诉屏幕阅读器禁用链接

Question

我有一个包含n个部分的页面。这些部分是隐藏的，只能通过单击各自的链接来显示。

在页面加载时，只有第一个链接处于活动状态，其余的n-1个链接是href="#"。基于某些逻辑，其他链接被单独激活。现在我的问题是，如何让屏幕阅读器了解链接被禁用或停用？

Answer 1

假设您希望屏幕阅读器知道它们在那里，只是禁用，我会使用按钮或链接，如下所示：

<button disabled>Section name</button>

<a href="#" role="button" aria-disabled="true">Section name</a>

这对于由一些外部逻辑控制的一组显示/隐藏区域是有益的。

启用后，您还应该考虑一些属性，让人们知道它是如何工作的：

<a href="#" role="button" aria-pressed="false">Section name</a>
<div aria-expanded="false">Content to show</div>

选择时：

<a href="#" role="button" aria-pressed="true">Section name</a>
<div aria-expanded="true">Content to show</div>

另一方面，如果它是手风琴（一次一个），那么我会在这里使用手风琴：http://whatsock.com/tsg/

您可能不想接受该框架，但只需阅读手风琴的说明就可以更好地理解它。

Answer 2

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

因此，如果使用带有href属性的A标签，您可以使用role=button和aria-disabled=true，它将被正确宣布。我建议使用tabindex="-1"将其从Tab键顺序中删除，以遵循禁用的活动元素的标准行为。

E.G

<a href="#" tabindex="-1" role="button" aria-disabled="true"> Label </a>

此外，当使用aria-pressed时，您还必须包含role=button，否则它将无法正常工作，因为它定义了ARIA Toggle控件。