anchor-without-href
Web validation
href attribute that points to a valid destination.An <a> element without an href is not exposed as a true link. When authors make it focusable with tabindex and add an onclick handler, it looks and behaves like a link but has no link role.
Keyboard and voice users then cannot reliably reach or operate it, and assistive technology may announce it inconsistently. Use a real link with an href, or a button when the control performs an action instead of navigating.
Pass Patterns
A real link with an href
The href makes the anchor a true link that keyboard and voice users can activate.
<a href="/contact">Contact us</a>A button for non-navigation actions
When the control performs an action instead of navigating, a button exposes the correct role.
<button type="button" onclick="toTop()">Back to top</button>Fail Patterns
Focusable anchor with no href
The anchor is made focusable with tabindex and uses an onclick handler, but without an href it is not a real link.
<a tabindex="0" onclick="openMenu()">Open menu</a>WCAG techniques
Sufficient techniques
Failure techniques
Try It Yourself
Using a screen reader
New to screen reader testing, or need a refresher?
Review this article first: Practical guides for using screen readers
- Load the page and open a screen reader.
- List the page's links with the screen reader's links command.
- Look for the control among the links.
Expected results: A real link appears in the links list and opens its destination when activated.
Actual results: The anchor without an href does not appear as a link, so link navigation cannot reach it.
Using a keyboard
- Press Tab to move focus through the page.
- When the control has focus, press Enter.
Expected results: Focus reaches a real link, and Enter moves to its destination.
Actual results: Focus reaches the anchor but pressing Enter does nothing, because there is no destination.
FAQ
How does this issue relate to 4.1.2 Name, role, value?
SC 4.1.2 requires a component's role to be programmatically determinable. An <a> without an href has no link role, so assistive technology cannot expose it as a link even when it looks and behaves like one.
Why is this issue marked as Critical?
A focusable anchor without an href looks like a link but does nothing for keyboard and voice users, and assistive technology cannot present it as a real link. This can fully block access to the intended action or destination.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 4.1.2 Name, Role, Value (A) | For all user interface components, the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to assistive technologies. |
| EN 301 549 | 9.4.1.2 Name, Role, Value | Same as the WCAG text. |
| Section 508 | 1194.21(d) | Sufficient information about a user interface element including the identity, operation and state of the element shall be available to assistive technology. When an image represents a program element, the information conveyed by the image must also be available in text. |