anchorValidity

Reports invalid usage of anchor elements.

✅ This rule is included in the jsx logical preset.

The HTML <a> (“anchor”) element represents a link to some place on the current page or another page. If an <a> does not have a valid href attribute than it is not a valid anchor.

Invalid anchors are most commonly seen when developers use an <a> with an onClick, rather than the more semantic <button>. Anchor elements should only be used for navigation, not triggering modifications to the current page.

Examples

❌ Incorrect

<a />

<a href="#" />

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

<a onClick={() => {}} />

<a href="#" onClick={() => {}} />

✅ Correct

<a href="https://example.com" />

<a href="/path" />

<a href="#section" />

<button onClick={() => {}} />

<a href="https://example.com" onClick={() => {}} />

When Not To Use It

If you use a framework that automatically populates anchors with proper href attributes, then you can disable this rule.

Further Reading

• MDN: The Anchor element
• WCAG 2.4.4 - Link Purpose
• WCAG 4.1.2 - Name, Role, Value

Equivalents in Other Linters

• ESLint: jsx-a11y/anchor-is-valid
• Oxlint: jsx_a11y/anchor-is-valid