什么用于很多细节'一页上的链接。 Web辅助功能不喜欢"详细信息"

时间:2015-06-22 01:55:48

标签: accessibility wai

根据http://webaim.org/standards/wcag/checklist#sc2.4.4

2.4.4链接目的(在上下文中) (A级)

The purpose of each link (or form image button or image map hotspot) can be determined from the link text alone, or from the link text and its context (e.g., surrounding paragraph, list item, table cell, or table headers).
Links (or form image buttons) with the same text that go to different locations are readily distinguishable.

所以WAVE(Web辅助功能评估工具 - http://wave.webaim.org)说出我的所有细节"我的网页上不推荐链接: enter image description here

但我无法想象什么会更好。我真的不想用实际细节文本的前几个字符来混淆页面,因为我认为它会使页面显得过于混乱。

1 个答案:

答案 0 :(得分:2)

嗯,有很多方法可以解决您的问题。仅举几例:

  • 您可以为每个链接添加一个title属性(例如title =" makeagoodpassword.com"上的详细信息),但是屏幕阅读器可能不会读出title属性的值,所以你&#39 ; d更好地添加aria-label ="有关makeagoodpassword.com的详细信息"到你的链接标签
  • 另一个(我的首选)选项将是隐藏文本,因为这似乎是最通用的解决方案:



 <a href="#" title="Details on makeagoodpassword.com">Details <span style="display:none;" aria-hidden="false">on makeagoodpassword.com</span></a>
&#13;
&#13;
&#13;

另请参阅: http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-refs了解其他选项。