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”.

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

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

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

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

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

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

Learn more:

MDN Reference

ARIA: Using aria-label

→

MDN Reference

HTML i element

→

MDN Reference

ARIA Roles

→