This rule determines if a given HTML anchor
<a> element has defined an attribute
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
- Anchor element creates a hyperlink and the attribute
hrefshould 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
tabindexwith value different than
- 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:
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
- Avoid an empty value or value that points to nowhere, e.g.
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
Accessibility, Best Practices, Sitelint