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 anchorhref="#"
is used as a<button>
. In that case a better option is to use<button type="button">Action</button>
.
Standard
Accessibility, Best Practices, Sitelint