# Element “a” is missing one or more of the following attributes: “href”, “role”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/element-a-is-missing-one-or-more-of-the-following-attributes-href-role
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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:

1. **Add an `href` attribute** if the element should be a link. This is the most common and recommended fix.
2. **Add a `role` attribute** if you're deliberately using `<a>` without `href` for a specific purpose, such as `role="button"`.
3. **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`

```html
<a>Click here</a>
```

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

### ❌ JavaScript-only handler without `href`

```html
<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`

```html
<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

```html
<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

```html
<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)

```html
<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.