How to fix aria-roledescription on an element without a role?

aria-roledescription page

The issue

A screen reader user hears a custom description, such as “slide” or “card”, with nothing behind it, or doesn’t hear it at all. The page meant to tell them what kind of thing they were on, and that description didn’t attach to anything.

The cause is aria-roledescription on an element that has no role for it to describe, typically a plain <div> or <span>. The attribute replaces how a role is announced; it doesn’t create one. Screen readers handle it inconsistently on elements without a role, so the description may be dropped. WCAG 4.1.2 requires an element’s role to be available to assistive technology.

Scope

Every visible element with an aria-roledescription attribute is checked. It passes when the element has a role, written in a role attribute or coming from the element itself, such as a <button>, a <nav> or an <article>, and that role is one the attribute may describe. Elements without a role, such as a <div>, <span> or <p> with no role attribute, fail.

How to check you have it

In probeo: the page reports aria-roledescription, “aria-roledescription must be on elements with an implicit or explicit role”, with serious impact.
By hand: search the page source for aria-roledescription and check that each element either has a role attribute or is an element with a built-in role.
With a tool: axe DevTools reports the same rule id. The accessibility pane in Chrome or Firefox DevTools shows each element’s role.

The fix

Give the element a role that its description refines, or remove aria-roledescription.

A carousel slide is a group, so role="group" with aria-roledescription="slide" is announced as a slide. A description should narrow the role, not contradict it.

<div role="group" aria-roledescription="slide" aria-label="2 of 5">
  …
</div>

Done when: every element with aria-roledescription has a role the description refines, and the check above comes back clean.

Do not

Do not use aria-roledescription to describe an element that has no role.
Do not give it a value that contradicts the role, such as describing a button as a link.
Do not leave it empty; an empty description says nothing.

FAQ

When is `aria-roledescription` worth using at all?

Rarely. It suits widgets that have a generic role but a specific meaning to users, such as a slide in a carousel. For most elements, the role’s own name is clearer and is translated into the user’s language by the screen reader, which a custom description isn’t.

Does a `<section>` have a role?

Only when it has an accessible name. A <section> with aria-label or aria-labelledby is a region; without one, it has no role, and aria-roledescription on it fails.

The description changes what is announced, not the expected keyboard behavior. Users rely on the underlying role for that, which is another reason the element needs one.

Which product detects this

Probeo checks this on every page of your site as part of Site Clarity. This page explains one instance; the product tells you every page that has it.