# The “aria-label” attribute must not be specified on any “a” element unless the element has a “role” value other than “caption”, “code”, “deletion”, “emphasis”, “generic”, “insertion”, “paragraph”, “presentation”, “strong”, “subscript”, or “superscript”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-aria-label-attribute-must-not-be-specified-on-any-a-element-unless-the-element-has-a-role-value-other-than-caption-code-deletion-emphasis-generic-insertion-paragraph-presentation-strong-subscript-or-superscript
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

An `aria-label` attribute on an `<a>` element is only valid when the link has an accessible role that supports naming — which means the `<a>` must have an `href` attribute or an explicit role that accepts a label.

When an `<a>` element lacks an `href` attribute, it has the implicit role of `generic`. The `generic` role is in the list of roles that do **not** support naming, so applying `aria-label` to it is invalid. This is because a generic element has no semantic meaning, and screen readers wouldn't know how to announce the label in a meaningful way.

The most common cause of this error is using `<a>` as a placeholder or JavaScript-only trigger without an `href`. An `<a>` **with** an `href` has the implicit role of `link`, which **does** support `aria-label`, so the error won't appear.

You have a few ways to fix this:

- **Add an `href`** to make it a proper link (most common fix).
- **Add an explicit role** that supports naming, such as `role="button"`, if the element acts as a button.
- **Use a `<button>`** instead if the element triggers an action rather than navigation.
- **Remove `aria-label`** if it's not needed, and use visible text content instead.

## HTML Examples

### ❌ Invalid: `aria-label` on an `<a>` without `href`

```html
<a aria-label="Close menu" onclick="closeMenu()">✕</a>
```

The `<a>` has no `href`, so its implicit role is `generic`, which does not support naming.

### ✅ Fix option 1: Add an `href`

```html
<a href="/close" aria-label="Close menu">✕</a>
```

### ✅ Fix option 2: Use a `<button>` instead

```html
<button aria-label="Close menu" onclick="closeMenu()">✕</button>
```

### ✅ Fix option 3: Add an explicit role that supports naming

```html
<a role="button" tabindex="0" aria-label="Close menu" onclick="closeMenu()">✕</a>
```

Using a `<button>` (option 2) is generally the best choice for interactive elements that perform actions rather than navigate to a URL.