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 Roles spec 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)