我有一个包含n 个部分的页面。这些部分是隐藏的,只能通过单击它们各自的链接来显示。
在页面加载时,只有第一个链接处于活动状态,其余 n-1 个链接为href="#"
. 基于一些逻辑,其他链接被单独激活。现在我的问题是,如何让屏幕阅读器了解链接已禁用或停用?
我有一个包含n 个部分的页面。这些部分是隐藏的,只能通过单击它们各自的链接来显示。
在页面加载时,只有第一个链接处于活动状态,其余 n-1 个链接为href="#"
. 基于一些逻辑,其他链接被单独激活。现在我的问题是,如何让屏幕阅读器了解链接已禁用或停用?
假设您希望屏幕阅读器知道它们在那里,只是被禁用,我会使用这样的按钮或链接:
<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/
您可能不想采用该框架,但只需阅读手风琴的注释以更好地理解它。
就像仅供参考一样,使用aria-disabled
最适合具有已定义角色的元素,例如role=button
.
因此,如果使用带有href
属性的 A 标记,您可以使用role=button
andaria-disabled=true
并且它将被正确宣布。我建议使用tabindex="-1"
将其从标签顺序中删除,以遵循禁用活动元素的标准行为。
例如
<a href="#" tabindex="-1" role="button" aria-disabled="true"> Label </a>
此外,在使用 时aria-pressed
,您还必须包含role=button
,否则它将无法正常工作,因为它定义了一个 ARIA Toggle 控件。