Why is this an issue?

ARIA (Accessible Rich Internet Applications) roles can make custom user interface patterns more accessible, but they should not be used to recreate semantics that HTML already provides. When a native HTML element already matches the intended semantics and behavior, prefer that element over adding a role to a generic container.

For example, instead of using a div element with a button role (<div role="button">Click me</div>), use a button element (<button>Click me</button>).

Using the native element preserves built-in semantics, browser behavior, keyboard interaction, and assistive technology support with less code to maintain. ARIA is still appropriate when no suitable HTML element exists for the pattern you need, or when the available HTML elements do not fit the component’s structure or behavior.

<div role="button" onClick={handleClick} /* Noncompliant */>Click me</div>

Replace the ARIA role with an appropriate HTML tag.

<button onClick={handleClick}>Click me</button>
Note

The suggested replacement is generated from a role-to-tag mapping. For roles such as group, dialog, or a named region, check that the suggested tag matches the intended semantics before applying it mechanically.

Exceptions

Some valid ARIA patterns are intentionally ignored when there is no direct native replacement, for example custom components, inline SVG icons, and structural roles used inside composite widgets.

Inline SVG elements with role="img" are not raised when they already expose an accessible name through a non-empty aria-label, aria-labelledby, or direct <title> child. This is a valid icon pattern when the SVG needs to stay inline.

<svg role="img" aria-label="Settings" viewBox="0 0 24 24">
  <path d="M10 10" />
</svg>

<span id="arrow-label" hidden>Arrow Down</span>
<svg role="img" aria-labelledby="arrow-label" viewBox="0 0 24 24">
  <path d="M12 4v16" />
</svg>

<svg role="img" viewBox="0 0 24 24">
  <title>Arrow Down</title>
  <path d="M12 4v16" />
</svg>

Generic containers with role="group" are not raised when they represent a control cluster or a structural subgroup inside a composite widget. The rule keeps reporting when several form controls share one accessible name and <fieldset> is the closer semantic alternative.

<form>
  <div role="group" aria-label="View mode">
    <button type="button">Grid</button>
    <button type="button">List</button>
  </div>
</form>

<div role="listbox">
  <div role="group" aria-label="Cities">
    <div role="option">Paris</div>
  </div>
</div>

Resources

Documentation

Standards