The element's role is missing or is not appropriate for the element's function.

Link to The element's role is missing or is not appropriate for the element's function. copied to clipboard

Rule ID:: aria-role-missing
User Impact:: Critical
WCAG :: 4.1.2.b

Rule

The name, role, value, states, and properties of user interface components MUST be programmatically determinable by assistive technologies.

Background

Every user interface control must have a role to convey what type of control it is for screen reader and other assistive technology users. Native HTML elements - such as <button>, <a>, <input>, <select> - already have a role, so nothing more needs to be done. If you create a custom version of a native HTML element or a custom control or widget that does not have a native HTML equivalent, you must add the relevant role(s) using ARIA as well as expected keyboard interactions.

Code Examples

Good Examples:

ARIA button element:

<span role="button" class="print-btn" tabindex="0">Print</span>

ARIA checkbox element:

<div>
  <span role="checkbox" class="checkbox-aria" aria-labelledby="pepperoni" tabindex="0" aria-checked="true"></span>
  <span id="pepperoni">Pepperoni</span>
</div>

ARIA tab/tabpanel widget:

<ul role="tablist">
  <li role="tab" aria-controls="panel-perceivable" tabindex="0">Perceivable</li>
  <li role="tab" aria-controls="panel-operable" tabindex="-1">Operable</li>
  <li role="tab" aria-controls="panel-understandable" tabindex="-1">Understandable</li>
  <li role="tab" aria-controls="panel-robust" tabindex="-1">Robust</li>
</ul>

Failure Examples:

Simulated button element:

<span class="print-btn">Print</span>

Simulated checkbox element:

<div>
  <span class="checkbox"></span>
  <span id="pepperoni">Pepperoni</span>
</div>

Tab/tabpanel widget:

<div>
  <div class="tab selected">Perceivable</div>
  <div class="tab unselected">Operable</div>
  <div class="tab unselected">Understandable</div>
  <div class="tab unselected">Robust</div>
</div>

How To Fix

Fix this issue by adding the appropriate, valid ARIA role or roles per the ARIA Recommendation document and the ARIA Authoring Practices document (see References below)