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

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/

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