# The “aria-label” attribute must not be specified on any “i” 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-i-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/)

The `aria-label` attribute cannot be used on an `<i>` element with its default implicit role (`generic`), because generic elements are not allowed to have accessible names.

The `<i>` element has an implicit ARIA role of `generic`, which is one of the roles explicitly prohibited from carrying an `aria-label`. This restriction exists because screen readers and other assistive technologies ignore accessible names on generic containers — so adding `aria-label` to a plain `<i>` element would silently fail to convey any meaning to users who rely on assistive technology.

This issue commonly appears when icon fonts (like Font Awesome) use `<i>` elements as decorative icons. If the icon is purely decorative, you should hide it from assistive technology with `aria-hidden="true"` and place the accessible label on a parent or sibling element instead. If the icon conveys meaning on its own, you can assign an appropriate role like `role="img"` so the `aria-label` is actually announced.

## HTML Examples

### ❌ Invalid: `aria-label` on a plain `<i>` element

```html
<button>
  <i class="icon-search" aria-label="Search"></i>
</button>
```

### ✅ Fix 1: Decorative icon — hide it, label the parent

```html
<button aria-label="Search">
  <i class="icon-search" aria-hidden="true"></i>
</button>
```

### ✅ Fix 2: Meaningful icon — assign `role="img"`

```html
<button>
  <i class="icon-search" role="img" aria-label="Search"></i>
</button>
```