useValidAnchor (since v10.0.0)
This rule is recommended by Rome.
Enforce that all anchors are valid, and they are navigable elements.
The anchor element (<a></a>) - also called hyperlink - is an important element that allows users to navigate pages, in the same page, same website or on another website.
While before it was possible to attach logic to an anchor element, with the advent of JSX libraries, it’s now easier to attach logic to any HTML element, anchors included.
This rule is designed to prevent users to attach logic at the click of anchors, and also makes sure that the href provided to the anchor element is valid. If the anchor has logic attached to it, the rules suggests to turn it to a button, because that’s likely what the user wants.
Anchor <a></a> elements should be used for navigation, while <button></button> should be used for user interaction.
There are many reasons why an anchor should not have a logic and have a correct href attribute:
- it can disrupt the correct flow of the user navigation e.g. a user that wants to open the link in another tab, but the default “click” behaviour is prevented;
- it can source of invalid links, and crawlers can’t navigate the website, risking to penalise SEO ranking
Examples
Invalid
<a href={null}>navigate here</a>a11y/useValidAnchor.js:1:10 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Provide a valid value for the attribute href.
> 1 │ <a href={null}>navigate here</a>
│ ^^^^
2 │
ℹ The href attribute should be a valid a URL
ℹ Check this thorough explanation to better understand the context.
<a href={undefined}>navigate here</a>a11y/useValidAnchor.js:1:10 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Provide a valid value for the attribute href.
> 1 │ <a href={undefined}>navigate here</a>
│ ^^^^^^^^^
2 │
ℹ The href attribute should be a valid a URL
ℹ Check this thorough explanation to better understand the context.
<a href>navigate here</a>a11y/useValidAnchor.js:1:4 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ The attribute href has to be assigned to a valid value.
> 1 │ <a href>navigate here</a>
│ ^^^^
2 │
ℹ The href attribute should be a valid a URL
ℹ Check this thorough explanation to better understand the context.
<a href="javascript:void(0)">navigate here</a>a11y/useValidAnchor.js:1:9 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Provide a valid value for the attribute href.
> 1 │ <a href="javascript:void(0)">navigate here</a>
│ ^^^^^^^^^^^^^^^^^^^^
2 │
ℹ The href attribute should be a valid a URL
ℹ Check this thorough explanation to better understand the context.
<a href="https://example.com" onClick={something}>navigate here</a>a11y/useValidAnchor.js:1:1 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Use a button element instead of an a element.
> 1 │ <a href="https://example.com" onClick={something}>navigate here</a>
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Anchor elements should only be used for default sections or page navigation
ℹ Check this thorough explanation to better understand the context.
Valid
<>
<a href={`https://www.javascript.com`}>navigate here</a>
<a href={somewhere}>navigate here</a>
<a {...spread}>navigate here</a>
</>Accessibility guidelines
Resources
- WebAIM - Introduction to Links and Hypertext
- Links vs. Buttons in Modern Web Applications
- Using ARIA - Notes on ARIA use in HTML