可访问性 (WCAG 2.0)、冗余链接和响应式网站导航答案

【问题标题】：Accessibility (WCAG 2.0), redundant links and responsive website navigation可访问性 (WCAG 2.0)、冗余链接和响应式网站导航
【发布时间】：2016-08-03 22:29:34
【问题描述】：

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

关于我们
- 关于我们
- 联系我们

在移动设备上，主链接在触摸时展开子导航，并带有一个复制的子链接以实际打开关于我们和其他子页面。

在桌面上，复制的链接是隐藏的 - 因为主要的 About Us 链接支持单击（打开页面）和悬停（显示子导航）状态。

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

有没有一种简单的属性方法来解决这个问题？还是没有比修改网站的 IA 更好的解决方法？

【问题讨论】：

只有一个关于我们的链接，点击后（移动设备上的触摸屏）会转到包含联系我们页面链接的关于我们页面？
谢谢，但这将移动设备上的导航限制在初级项目上。移动设备需要访问菜单中每个主要链接的完整子导航。您的建议需要加载页面，并且与移动设备上所需的导航不一致。

标签： html navigation accessibility wcag2.0

【解决方案1】：

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

【讨论】：

好电话。用户比工具更重要！
是的，就是这样。请务必记住，这些工具正在处理潜在问题，在某些情况下，出于充分的理由忽略它们是完全正确的。
这不是role="presentation" 的预期用途，如果您已经使用aria-hidden="true" 从可访问性树中删除元素，则删除角色是多余的。为什么不让事情保持原样？我觉得讽刺的是，您说“用户高于工具”，但您修改了链接以完全删除辅助技术用户的链接！
@chipit24 这些是冗余链接，因为它们是 html 导航结构的一部分，但被 CSS 隐藏。关于为什么导航项目像这样包含在 HTML 中是一个很长的故事，但是这些链接在某些断点处被 CSS 视觉隐藏......所以问题是关于将它们隐藏在辅助技术中以匹配。我认为你在这里错过了目标 - 使 aria nav 与视觉相匹配。

【解决方案2】：

您如何在桌面尺寸上隐藏链接？使用 display:none 会将其从页面中删除，而不仅仅是使其不可见或非常小，因此可以防止任何重复链接问题。如果您已经在使用 display:none，则可能是您用于评估可访问性的工具中的错误。

【讨论】：

使用 Foundation 'hide-for-large-up' 类使用 CSS 隐藏链接以用于大尺寸。我认为 WAVE 工具读取 HTML 文档时不考虑 CSS - 因为它正在测试屏幕阅读器等辅助技术的标记，其中不考虑 CSS 样式。
Display:none 从 DOM 中删除内容，因此屏幕阅读器会尊重这一点。这是隐藏事物与向所有人隐藏事物之间的主要区别。这就是 Foundation 使用的，所以尽管 WAVE 将其标记为问题，但我怀疑它可能没问题。您可以在 NVDA（免费）中进行测试以进行检查吗？

【解决方案3】：

WCAG 2.0 中没有“冗余链接”之类的东西

只有两个科目，你要关心：

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

但是如果一个工具说它有问题，你有很多解决方案：忽略这个工具，改变你的工具，或者修改文本：

关于我们
- 联系我们
- 关于我们

【讨论】：

WAVE 可访问性工具会针对冗余链接发出警报。每个带有重复 href 的锚标记都会产生一个警报。根据该工具，它的含义：相邻链接指向相同的 URL。为什么重要：当相邻链接指向相同位置时（例如链接的产品图像和相邻的链接产品名称，它们会转到相同的产品页面），这会导致键盘和屏幕阅读器用户额外的导航和重复。 The Algorithm... in English: 两个相邻的链接指向同一个 URL。
支持，因为在“联系我们”下方移动“关于我们”的孩子确实解决了 WAVE 工具中的邻接问题，但将重复的主要项目移动到子导航列表下方会在导航菜单时出现不同的可用性问题。