Web辅助功能：冗余链接-相邻链接转到标签<a href="javascript:void(0)">的同一URL

编程问答 2022-08-12

问题描述

代码：

<a href="javascript:void(0)" role="button" title="Start a Process link" style="">Start a Process link</a>

我正在使用wave工具进行Web访问。 Wave工具给出错误：冗余链接-相邻链接转到相同的URL。 参考：WCAG 2.4.4 Link Purpose (In Context) (Level A)

我知道由于href="javascript:void(0)"会导致错误-相邻链接转到相同的URL。 但是我必须在点击标签时运行jquery函数（在重定向之前检查验证和设置值）。

请问有什么建议吗？

解决方法

该错误指出存在另一个具有相同目标的链接元素（具有有效的<a>属性的锚点href或具有role="link"的另一个元素）。在您的情况下，很有可能目标（href）是javascript:void(0)，并且这样的链接可能不止一个。因此，Wave认为这些链接相同，因此标记了WCAG 2.0 Success Criterion 2.4.4 Link Purpose (In Context)。

解决方案

  1. 理想情况下，使用<button>（如上面的评论中所述）-它会自然处理所有事件
  2. 如果不可能：
    • 更改目标（可以替换为href="#"）
    • 删除role="button"-否则它将覆盖所有链接行为。
    • 在title和内部文本中都删除了过多的“链接”一词-该角色将从标记中传达给屏幕阅读器用户，而无需在标签中添加。

示例

<a href="#" title="Start a Process" style="">Start a Process</a>

或

<button style="">Start a Process</a>
wcag2.0web-accessibility