missing-href-on-a

Description

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

Purpose

A link without href have a negative impact on accessibility. The href attribute specifies the URL of the page the link goes to. When this attribute is missing, it can cause confusion for users who rely on screen readers or other assistive technologies to navigate the web.

There are two major issues when the link <a> HTML element is without the attribute href:

Anchor element creates a hyperlink and the attribute href should point to a valid URL. The user can’t navigate to the location when the URL is not defined.
The user can’t 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.
Non-Web links and protocols: The most frequent sort of connection is to other web pages using the HTTP protocol, however there are various more types of transactions that may be used using other basic Internet protocols. This relates to the following protocols:
- mailto:john@example.com
- file://server/pathSpecifies a file without indicating the protocol. This is useful for accessing files on a contained site such as a disk, CD or kiosk application, but it is less appropriate over networks (such as the Internet).
- news:newsgroup or message_idAccesses either a single message or an entire newsgroup within the Usenet news system. Some browsers do not support news URLs, so you should avoid using them.
- nntp://server:port/newsgroup/articleProvides a complete mechanism for accessing Usenet news articles. The article is served only to machines that are allowed to retrieve articles from this server, so this URL has limited practical use.
- telnet://user:password@server:port/Opens a telnet session with a desired server. The user and password@ elements are optional and follow the same rules as described for ftp://
- gopher://server:port/pathAccesses a document on a gopher server. The gopher document retrieval system was eclipsed by the World Wide Web, but some gopher servers are still operating.

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