anchor-without-href

Anchor elements (links) must have a "href" attribute so assistive technologies will read them as links.

Description

Semantic elements sometimes require specific attributes to be read correctly by assistive technologies. The anchor tag (link) needs the "href" attribute to be read as a link. This problem is often overlooked because this behavior is not consistent between different operating systems. In a Windows environment, for example, it will be read as a "text" element, so screen reader users do not receive any indication that the element is interactive and what type of interactive. On the other hand, on Mac OS, VoiceOver reads anchor elements as links even when they don't have a "href" attribute. If the element is not supposed to function as a link, this may confuse the users and cause a misunderstanding about the element's purpose. Anchor elements without "href" are also not included by default in the page’s focus sequence, making them inaccessible to keyboard users.

Quick Fixes

If the element is supposed to function as a link and functions through JavaScript, you can add to it href="#". Note that you must add event.preventDefault(); to the top of the triggered function to prevent the page refreshing.

HTML

1✓ <a href="#" onclick="goToUrl()"> Link Text </a>

JavaScript

1✓ function goToUrl(event) {
2    event.preventDefault();
3    // The rest of the function
4}

If the element is not supposed to function as a link, change it to have more appropriate semantics, like a button if that is its function or even a <div> if it is not supposed to be interactive. Note that changing the semantics should be inherently bound to the element's function and should reflect it.

1✓ <button onclick="doSomething()"> Button label </button>
2
3✓ <a onclick="doSomething()" role="button" tabindex="0">
4        Button label
5    </a>
6
7✗ <a onclick="doSomething()"> Button label </a>

How Users Are Affected

Screen reader users may perceive non-link elements as links, actual links as plain text, or not perceive the element's accurate role. In addition, keyboard users may not be able to use the element in a case where it is supposed to be interactive.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
4.1.2 Name, role, value (A)