Verificação HTML: Element “a” is missing one or more of the following attributes: “href”, “role”.

Sobre este problema HTML

According to the HTML specification, the <a> element can exist without an href attribute, but in that case it represents a placeholder where a link might otherwise have been placed. However, the validator flags this as an issue because an <a> element without href and without role is ambiguous — browsers won’t treat it as a link (it won’t be focusable or keyboard-accessible), and assistive technologies won’t know how to present it to users.

This matters for several reasons:

Accessibility: Without href, the <a> element loses its implicit role="link" and is no longer announced as a link by screen readers. It also won’t appear in the tab order, making it invisible to keyboard users.
Semantics: If the element is styled and scripted to behave like a button or link but lacks the proper attributes, it creates a disconnect between what users see and what the browser understands.
Standards compliance: The spec expects you to be explicit about the element’s purpose when href is absent.

The most common cause of this issue is using <a> elements as JavaScript-only click targets without providing an href, or using them as styled containers without any interactive purpose.

How to Fix It

There are several approaches depending on your intent:

Add an href attribute if the element should be a link. This is the most common and recommended fix.
Add a role attribute if you’re deliberately using <a> without href for a specific purpose, such as role="button".
Use a different element entirely. If it’s not a link, consider using a <button>, <span>, or another semantically appropriate element.

Examples

❌ Missing both `href` and `role`

<a>Click here</a>

This triggers the validator error because the <a> has neither href nor role.

❌ JavaScript-only handler without `href`

<a onclick="doSomething()">Submit</a>

Even with an event handler, the element lacks href and role, so it fails validation and is inaccessible to keyboard users.

✅ Fix by adding an `href`

<a href="/about">About us</a>

Adding href makes it a proper hyperlink — focusable, keyboard-accessible, and recognized by screen readers.

✅ Fix by adding `role` for a non-link purpose

<a role="button" tabindex="0" onclick="doSomething()">Submit</a>

If you must use <a> without href as a button, add role="button" and tabindex="0" to ensure it’s focusable and properly announced. However, consider using a real <button> instead.

✅ Better: use the right element

<button type="button" onclick="doSomething()">Submit</button>

If the element triggers an action rather than navigating somewhere, a <button> is the correct semantic choice. It’s focusable by default, responds to keyboard events, and doesn’t need extra attributes.

✅ Placeholder anchor (intentional non-link)

<a role="link" aria-disabled="true">Coming soon</a>

If you’re intentionally showing a placeholder where a link will eventually appear, you can add a role and indicate its disabled state for assistive technologies. Alternatively, use a <span> with appropriate styling to avoid the issue altogether.