useValidAnchor

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v1.0.0` - Diagnostic Category: [`lint/a11y/useValidAnchor`](/reference/diagnostics#diagnostic-category) - 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**](/reference/diagnostics#error). - Sources: - Same as [`jsx-a11y/anchor-is-valid`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/anchor-is-valid.md) - Same as [`qwik/jsx-a`](https://qwik.dev/docs/advanced/eslint/#jsx-a)

How to configure

json

{
	"linter": {
		"rules": {
			"a11y": {
				"useValidAnchor": "error"
			}
		}
	}
}

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 users from attaching logic at the click of anchors when the href provided to the anchor element is not valid. Avoid using # symbol inside the href when you are attaching the logic to the anchor element. If the anchor has logic attached to it with an incorrect href 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 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

Invalid

jsx

<a href={null}>navigate here</a>

<pre class="language-text"><code class="language-text">code-block.jsx:1:4 <a href="https://biomejs.dev/linter/rules/use-valid-anchor">lint/a11y/useValidAnchor</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ 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 <a href="https://marcysutton.com/links-vs-buttons-in-modern-web-applications">this thorough explanation</a> to better understand the context. </code></pre>

jsx

<a href={undefined}>navigate here</a>

<pre class="language-text"><code class="language-text">code-block.jsx:1:4 <a href="https://biomejs.dev/linter/rules/use-valid-anchor">lint/a11y/useValidAnchor</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ 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 <a href="https://marcysutton.com/links-vs-buttons-in-modern-web-applications">this thorough explanation</a> to better understand the context. </code></pre>

jsx

<a href>navigate here</a>

jsx

<a href="javascript:void(0)">navigate here</a>

<pre class="language-text"><code class="language-text">code-block.jsx:1:4 <a href="https://biomejs.dev/linter/rules/use-valid-anchor">lint/a11y/useValidAnchor</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ 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 <a href="https://marcysutton.com/links-vs-buttons-in-modern-web-applications">this thorough explanation</a> to better understand the context. </code></pre>

jsx

<a onClick={something}>navigate here</a>

<pre class="language-text"><code class="language-text">code-block.jsx:1:4 <a href="https://biomejs.dev/linter/rules/use-valid-anchor">lint/a11y/useValidAnchor</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ 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 <a href="https://marcysutton.com/links-vs-buttons-in-modern-web-applications">this thorough explanation</a> to better understand the context. </code></pre>

Valid

jsx

<a href="https://example.com" onClick={something}>navigate here</a>

jsx

<a href={`https://www.javascript.com`}>navigate here</a>

jsx

<a href={somewhere}>navigate here</a>

jsx

<a {...spread}>navigate here</a>

Accessibility guidelines

WCAG 2.1.1

</TabItem> </Tabs>