Required ARIA attribute missing

aria/required-attribute-missing

WCAG success criterion: 4.1.2 (level A)
Outcome class: Automatic. An automated check that can report a confirmed violation.
Area: Accessibility, Technical Robustness
Default severity: critical
axe-core rule: aria-required-attr

Why we flag this

Assistive technologies cannot reliably expose the element state or value.

Role and ARIA attribute set are incomplete.

What the rule checks

Scope. Elements in the accessibility tree with an explicit role that requires states: checkbox, switch, radio (aria-checked), combobox (aria-expanded), slider, spinbutton, meter (aria-valuenow), scrollbar (aria-controls, aria-valuenow), focusable separator (aria-valuenow).

Expectation. Fails when a required state is missing: a custom checkbox or switch without aria-checked is announced without its state, a combobox without aria-expanded, a slider without aria-valuenow. A native element that carries the state itself passes (<input type=checkbox role=switch>, <input type=range role=slider>, <meter>), as does a static separator without tabindex. Hidden subtrees are out of scope; open shadow roots are in scope.

Source. WCAG 2.2 SC 4.1.2 Name, Role, Value; WAI-ARIA 1.2 section 5.2.5 (Required States and Properties); ACT 4e8ab6

Detection: shared; needs dom, ax_tree.

Failing example

The check reports a violation here. Corpus case value_widgets_shadow, element div#shadow-volume. The page may contain further findings for other rules.

value_widgets_shadow.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Custom slider inside a shadow root corpus case</title>
</head>
<body>
    <main>
        <h1>Web component with a custom slider</h1>
        <x-volume>
            <template shadowrootmode="open">
                <div id="shadow-volume" role="slider" tabindex="0" aria-label="Volume"></div>
            </template>
        </x-volume>
    </main>
</body>
</html>

Passing example

The check passes here and reports nothing. Corpus case value_widgets_native. The page may contain further findings for other rules.

value_widgets_native.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Native value widgets corpus case</title>
</head>
<body>
    <main>
        <h1>Native range, number and date inputs</h1>
        <!-- Native controls expose their value without aria-valuenow, and the
             day/month/year fields of a date input are the browser's (#656). -->
        <label for="volume">Volume</label>
        <input id="volume" type="range" min="0" max="10">
        <label for="zoom">Zoom</label>
        <input id="zoom" type="range" role="slider" value="3" min="0" max="10">
        <label for="qty">Quantity</label>
        <input id="qty" type="number">
        <label for="amount">Amount</label>
        <input id="amount" type="number" value="4">
        <input type="date" aria-label="Order date value">
        <label for="time">Pickup time</label>
        <input id="time" type="time">
        <label for="month">Billing month</label>
        <input id="month" type="month">
        <label for="week">Calendar week</label>
        <input id="week" type="week">
        <label for="appointment">Appointment</label>
        <input id="appointment" type="datetime-local">
        <label for="disk">Disk usage</label>
        <meter id="disk" value="0.6">60%</meter>
        <hr>
        <div role="slider" tabindex="0" aria-label="Custom with value"
             aria-valuenow="5" aria-valuemin="0" aria-valuemax="10"></div>
        <div role="slider" aria-label="Hidden custom slider" style="display:none"></div>
    </main>
</body>
</html>

This page is generated from the rule catalogue and the rule contracts; see therule overview for how the outcome classes are derived.