Digital Accessibility Knowledge Base

aria-required-attr

Required ARIA attributes must be provided

Who might be affected
Screen Reader

Description

The ARIA role attribute allows the accessibility APIs to map to the accessibility tree, non-semantic elements, but it does not apply the attributes their semantic role requires, for example, signifying the element state (e.g. checked, expanded) or its relationships with other elements (owns, controls). It is very important to make sure that elements with a coerced semantics have all its required attributes, otherwise screen readers will not announce it correctly.

Quick Fixes

Make sure that all the additional attributes required by the element's semantics are present.
If you are not sure if an element requires additional attributes check out the ARIA Rolesspec under "Required States and Properties" of each role.
1    <!-- "checkbox" requires "aria-checked"
2         attribute to signify its state -->
3✓   <div role="checkbox" aria-checked="true"></div>
4✗   <div role="checkbox"></div>
5

6    <!-- "heading" requires to specify the heading
7         level using the "aria-level" attribute -->
8✓   <div role="heading" aria-level="1">
9        <!-- Heading text -->
10    </div>
11✗   <div role="heading"> <!-- Heading text --> </div>

How Users Are Affected

Users that are dependent on screen readers or other assistive technology that uses the accessibility tree to parse the page, will get partial information about elements on the page.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
4.1.2 Name, Role, Value (A)