useValidAnchor
Summary
Section titled “Summary”- Rule available since:
v1.0.0 - Diagnostic Category:
lint/a11y/useValidAnchor - This rule is recommended, meaning it is enabled by default.
- This rule doesn’t have a fix.
- The default severity of this rule is error.
- Sources:
- Same as
jsx-a11y/anchor-is-valid - Same as
qwik/jsx-a
- Same as
How to configure
Section titled “How to configure”{ "linter": { "rules": { "a11y": { "useValidAnchor": "error" } } }}Description
Section titled “Description”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 invalid anchor usage when the href is missing or not navigable,
including the empty fragment # both with and without attached logic. With logic attached, an anchor
with an invalid href usually behaves like an action and should be a button, because that’s likely
what the user wants. Without logic, href="#" still points to no real target and can cause scroll
position and keyboard focus to fall out of sync. Prefer linking to an actual destination, such as
href="#top".
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 with an incorrect 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” behavior is prevented
- it can source of invalid links, and crawlers can’t navigate the website, risking to penalize SEO ranking
For a detailed explanation, check out https://marcysutton.com/links-vs-buttons-in-modern-web-applications
Examples
Section titled “Examples”Invalid
Section titled “Invalid”<a href={null}>navigate here</a>code-block.jsx:1:4 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>code-block.jsx:1:4 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>code-block.jsx:1:4 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Provide a valid value for the attribute href.
> 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>code-block.jsx:1:4 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 onClick={something}>navigate here</a>code-block.jsx:1:4 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Use a button element instead of an a element.
> 1 │ <a 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.
<a href="https://example.com" onClick={something}>navigate here</a><a href={`https://www.javascript.com`}>navigate here</a><a href={somewhere}>navigate here</a><a {...spread}>navigate here</a>Accessibility guidelines
Section titled “Accessibility guidelines”Related links
Section titled “Related links”Summary
Section titled “Summary”- Rule available since:
v2.5.0 - Diagnostic Category:
lint/a11y/useValidAnchor - This rule is recommended, meaning it is enabled by default.
- This rule doesn’t have a fix.
- The default severity of this rule is error.
- Sources:
- Inspired from
jsx-a11y/anchor-is-valid - Inspired from
qwik/jsx-a
- Inspired from
How to configure
Section titled “How to configure”{ "linter": { "rules": { "a11y": { "useValidAnchor": "error" } } }}Description
Section titled “Description”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 invalid anchor usage when the href is missing or not navigable,
including the empty fragment # both with and without attached logic. With logic attached, an anchor
with an invalid href usually behaves like an action and should be a button, because that’s likely
what the user wants. Without logic, href="#" still points to no real target and can cause scroll
position and keyboard focus to fall out of sync. Prefer linking to an actual destination, such as
href="#top".
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 with an incorrect 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” behavior is prevented
- it can be a source of invalid links, and crawlers can’t navigate the website, risking to penalize SEO ranking
For a detailed explanation, check out this article by Marcy Sutton
Examples
Section titled “Examples”Invalid
Section titled “Invalid”<a href>navigate here</a>code-block.html:1:4 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Provide a valid value for the attribute href.
> 1 │ <a href>navigate here</a>
│ ^^^^
2 │
ℹ The href attribute should be a valid URL
ℹ Check this thorough explanation to better understand the context.
<a href="javascript:void(0)">navigate here</a>code-block.html:1:4 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 URL
ℹ Check this thorough explanation to better understand the context.
<a onclick="func()">navigate here</a>code-block.html:1:4 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Use a button element instead of an a element.
> 1 │ <a onclick=“func()“>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.
<a href="https://example.com">navigate here</a><a href="https://www.javascript.com">navigate here</a>Accessibility guidelines
Section titled “Accessibility guidelines”Related links
Section titled “Related links”Sponsored by
Copyright (c) 2023-present Biome Developers and Contributors.