A: aria-roledescription must be on elements with a semantic role (WCAG 4.1.2)

• Meaning
• Impact
• Recommendation
• Examples

Ensure that aria-roledescription is only used in conjunction with an implicit or explicit role.

This means

aria-roledescription supplements the role name spoken by assistive technologies in plain text. It only works if the element has an actual role — either implicitly through native HTML or explicitly via role="…". Without a role or with role="none" or role="presentation" it is ineffective or misleading. aria-roledescription never replaces the true role.

Impact

If the underlying role is missing or obscured, screen readers do not receive reliable information. Users become confused, interaction patterns break, and this constitutes a WCAG violation.

Recommendation

• First use correct, native HTML.
• If necessary, set an appropriate role and only then meaningfully add aria-roledescription.
• Formulate descriptions short, clear, and localized.
• Never use it to hide or replace the true role.

Example

Problematic

<!-- No role present -->
<div aria-roledescription="Progress indicator"></div>
 
<!-- Role deliberately neutralized -->
<div role="none" aria-roledescription="Menu">…</div>

Better

<!-- Implicit role progressbar, added description -->
<progress aria-roledescription="Progress indicator" value="50" max="100">50%</progress>
 
<!-- Explicit role with roledescription -->
<div role="tablist" aria-roledescription="Tab bar">
  <button role="tab" aria-selected="true">About us</button>
  <button role="tab" aria-selected="false">Services</button>
</div>
 
<!-- Nav with added description and name -->
<nav aria-roledescription="Main navigation" aria-label="Site navigation">…</nav>