Search code examples
htmlaccessibilitywcag2.0

Web Accessibility: Redundant link- Adjacent links go to the same URL for a tag <a href="javascript:void(0)">

code:

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

I am using wave tool for Web accessibility. Wave tool gives error:

Redundant link- Adjacent links go to the same URL.
Ref : WCAG 2.4.4 Link Purpose (In Context) (Level A)

I understand due to href="javascript:void(0)" it gives the error "Adjacent links go to the same URL."

But I have to run jQuery function (to check validation & set value before redirect) on click of the <a> tag.

Any suggestion please?

Solution

  • The error points out that there is another link element (anchor <a> with a valid href attribute or another element with role="link") that has the same target. In your case it is very likely as the target (href) is javascript:void(0) and there's probably more than one link like that. So the Wave thinks that those links are the same thus flagging WCAG 2.0 Success Criterion 2.4.4 Link Purpose (In Context).

    Solution

    1. Ideally, use <button> (as was mentioned in the comment above) - it will handle all events naturally
    2. If it's not possible:
      • change the target (it can be replaced with href="#")
      • remove role="button" - it will overwrite all link behavior otherwise.
      • remove word "link" in both title and inner text is excessive - the role will be communicated to screen reader users from the markup, no need to add it in labels.

    Examples

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

    Or

    <button style="">Start a Process</button>