missing-href-on-a

Description

This rule determines if a given HTML anchor <a> element has defined an attribute href.

Purpose

Attribute href defines an URL that the hyperlink points to. When it’s not defined then the user cannot navigate to this element using the keyboard (with exception when there is defined the attribute tabindex with value different than -1).

Additional information’s

For following code <a title="Title example">Link description example</a> Accessibility Tree exposes:
```
Name: "Title example"
Role: generic
```
For following code <a href="" title="Title example">Link description example</a> Accessibility Tree exposes:
```
Name: "Link description example"
Description: "Title example"
Role: link
Focusable: true
```
A note about smooth scrolling: be cautious about the use of smooth scrolling. If you use this make sure there is a way to switch it off as it may be distracting or disorientating for people with either motion disorders or anxiety disorders. One way you can do this is to use the CSS media query prefers-reduced-motion.
An anchor element that is disabled (<a aria-disabled="true" role="link">Link</a>) is not counted as not navigable.

How to fix it

Always define a non-empty attribute href for <a> element.
Avoid an empty value or value that points to nowhere, e.g. "#" or "javascript:void(0)". These values lead to unexpected behaviour when copying or dragging links, opening links in a new tab or window, bookmarking, and when JavaScript is still downloading, errors out, or is disabled. This also conveys incorrect semantics to assistive technologies (e.g. screen readers).
Using href="#" is nearly always a sign that the wrong element is being used or it is being used incorrectly. In most cases, the anchor href="#" is used as a <button>. In that case a better option is to use <button type="button">Action</button>.

Standard

Accessibility, Best Practices, Sitelint

SiteLint