# Bad value “icon” for attribute “role” on element “span”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-icon-for-attribute-role-on-element-span
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The WAI-ARIA specification defines a specific set of role values that assistive technologies like screen readers understand. These include roles such as `button`, `checkbox`, `alert`, `dialog`, `img`, `navigation`, `banner`, and many others. The value `"icon"` is not among them. When a browser or assistive technology encounters an unrecognized role, it cannot determine the element's purpose, which defeats the goal of using ARIA in the first place.

This is primarily an **accessibility problem**. Screen readers rely on valid ARIA roles to communicate the nature of elements to users. An invalid role like `"icon"` is either ignored or causes unpredictable behavior, leaving users of assistive technologies without the context they need. It's also a **standards compliance issue** — the W3C validator flags this because the HTML specification requires `role` values to match roles defined in the ARIA specification.

The fix depends on the purpose of the element:

- **Decorative icons** (that don't convey information): Remove the `role` attribute entirely, or use `aria-hidden="true"` to explicitly hide the element from the accessibility tree.
- **Meaningful icons** (that convey information visually): Use `role="img"` along with an `aria-label` to provide a text alternative.
- **Icons inside interactive elements**: Hide the icon with `aria-hidden="true"` and ensure the parent interactive element has an accessible name through visible text or an `aria-label`.

## Examples

### ❌ Invalid: Using the non-existent `"icon"` role

```html
<span class="icon" role="icon"></span>
```

This triggers the validation error because `"icon"` is not a valid ARIA role.

### ✅ Fixed: Decorative icon with no role

If the icon is purely decorative and doesn't convey any meaning (e.g., it's next to text that already describes the action), simply remove the `role` attribute. Adding `aria-hidden="true"` ensures screen readers skip over it completely.

```html
<span class="icon" aria-hidden="true"></span>
```

### ✅ Fixed: Meaningful icon using `role="img"`

If the icon conveys meaningful information that isn't available through surrounding text, use `role="img"` and provide a descriptive `aria-label`:

```html
<span class="icon-warning" role="img" aria-label="Warning"></span>
```

This tells assistive technologies that the element represents an image and gives it an accessible name of "Warning."

### ✅ Fixed: Icon inside a button

When an icon is placed inside an interactive element like a button, hide the icon from the accessibility tree and let the button's text or label provide the meaning:

```html
<button>
  <span class="icon-save" aria-hidden="true"></span>
  Save
</button>
```

If the button has no visible text (an icon-only button), provide an `aria-label` on the button itself:

```html
<button aria-label="Save">
  <span class="icon-save" aria-hidden="true"></span>
</button>
```

### ✅ Fixed: Icon using an `<img>` element instead

If you're using an actual image file for the icon, consider using a semantic `<img>` element, which has a built-in `img` role:

```html
<img src="icon-alert.svg" alt="Alert" class="icon">
```

For decorative image icons, use an empty `alt` attribute:

```html
<img src="icon-decorative.svg" alt="" class="icon">
```