useValidAnchor (HTML)

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

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "a11y": {
5
        "useValidAnchor": "error"
6
      }
7
    }
8
  }
9
}

Description

Require anchors to provide a real navigation destination.

An <a> element is a hyperlink. It should navigate to another page or to a real location in the current page through a usable href. Missing values, empty values, #, and javascript: URLs do not provide a meaningful destination.

Use <button> for actions such as opening a dialog or submitting data. Using a link for an action can break standard link behavior, including opening in a new tab, copying the link, keyboard navigation, and discovery by search crawlers.

See Links vs. Buttons in Modern Web Applications for a detailed explanation.

Examples

Invalid

1
<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.

1
<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.

1
<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.

Valid

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

1
<a href="https://www.javascript.com">navigate here</a>

Accessibility guidelines

WCAG 2.1.1