Warning Unrecognized ARIA role value

Why a typo'd or made-up role attribute value is silently ignored by screen readers, undoing whatever accessibility fix it was meant to provide.

The validator warns when a role attribute's value doesn't match any role in the WAI-ARIA specification.

Example

<!-- Wrong: "buton" is not a real role -->
<div role="buton" tabindex="0">Submit</div>

<!-- Right -->
<div role="button" tabindex="0">Submit</div>

<!-- Usually better still: use the native element -->
<button>Submit</button>

Why it matters

An unrecognized role value doesn't cause an error — it's simply ignored. Assistive technology falls back to the element's implicit role instead (a bare <div> has no implicit role at all), which quietly defeats whatever accessibility fix the role attribute was meant to provide. Because sighted users see no visible difference, this class of bug tends to go unnoticed without a screen reader or an automated accessibility check specifically looking for it. The most reliable fix is often to avoid the situation altogether: use the native HTML element that already has the right role and behavior built in (a real <button> instead of a <div role="button">) rather than reconstructing it with ARIA.

Frequently asked questions

Why doesn't the browser show an error for an invalid role?

ARIA attributes are designed to fail gracefully, like most of HTML — an unrecognized value is simply not applied, with no console warning in most browsers. That silence is exactly why this issue is easy to ship without noticing.

Should I use role attributes at all, or stick to native elements?

The first rule of ARIA use is to prefer a native HTML element with the behavior and semantics you need over adding role and ARIA attributes to a generic element. Reach for role only when there's genuinely no native element that fits — a custom widget like a tab panel or combobox, for example.