辅助功能(WCAG 2.0),冗余链接和响应式网站导航

时间:2016-08-03 22:29:34

标签: html navigation accessibility wcag2.0

响应式网站上的触摸设备存在以下简单导航:

  • 关于我们
    • 关于我们
    • 联系我们

在移动设备上,主链接会在触摸时展开子区域,并使用复制的子链接实际打开“关于我们”和其他子页面。

在桌面上,隐藏了复制的链接 - 因为主要的“关于我们”链接支持单击(打开页面)和悬停(显示子窗口)状态。

这似乎是使用移动触摸菜单处理响应式网站导航的常用方法,但重复的链接会产生WCAG 2.0冗余链接警报。

是否有一种简单的属性方法来解决这个问题?或者没有比修改网站的IA更好的解决方案了吗?

3 个答案:

答案 0 :(得分:4)

我最终在重复的导航项上使用了属性aria-hidden="true" role="presentation"。 WAVE仍会抛出“重复链接”警报,但正如@stringy所提到的,这些工具并不完美,我宁愿在WAVE中发出一些警报,也不会通过改变导航顺序来惩罚用户。 aria-hidden="true" role="presentation"为辅助技术提供了一些额外的背景。

答案 1 :(得分:2)

您如何隐藏桌面尺寸上的链接?使用display:none将其从页面中删除,而不是仅使其不可见或非常小,因此它将防止任何重复的链接问题。如果您已经使用display:none,则可能是您用来评估辅助功能的工具中的错误。

答案 2 :(得分:1)

没有"冗余链接"在WCAG 2.0中

只有两个科目,你必须要关心:

因此,只要不包含图像,根据WCAG 2.0,有两个链接导致同一页面无论它们是否相邻都不是问题。

但是,如果一个工具说它有问题,那么您有很多解决方案:忽略此工具,更改工具或修改文本:

  • 关于我们
    • 联系我们
    • 关于我们