ARIA attribute not allowed for this role

aria/attribute-not-allowed

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: high
axe-core rule: aria-allowed-attr

Why we flag this

Assistive technologies ignore the attribute or interpret it incorrectly.

The attribute/role combination does not match the ARIA specification.

What the rule checks

Scope. Every non-empty WAI-ARIA attribute on an element in the accessibility tree whose role (explicit or implicit) is defined in WAI-ARIA 1.2.

Expectation. Fails when the element's role does not support the attribute (aria-selected on a listitem, aria-checked on role img, aria-expanded on a generic div), and when ARIA in HTML forbids it on the native element (aria-checked on a native checkbox, aria-valuemax next to max). Attributes the role supports pass, also on a custom widget whose role takes the state (role=checkbox with aria-checked) and the treegrid row with aria-expanded. Prohibited naming is aria/attribute-prohibited, not this id. Hidden subtrees are out of scope.

Source. WCAG 2.2 SC 4.1.2 Name, Role, Value; WAI-ARIA 1.2 section 5.2 (supported states and properties per role); ARIA in HTML section 3 (author MUST NOT rules); ACT 5c01ea

Detection: shared; needs dom, ax_tree.

Failing example

The check reports a violation here. Corpus case widget_patterns, element div. The page may contain further findings for other rules.

widget_patterns.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Widget pattern corpus case</title>
</head>
<body>
    <main>
        <h1>Accordion, tablist, and combobox patterns</h1>

        <!-- accordion-trigger-not-button: aria-expanded on a non-button element -->
        <div aria-expanded="false">Section 1 (div trigger)</div>

        <!-- accordion-no-controls: button trigger without aria-controls -->
        <button aria-expanded="false">Section 2</button>

        <!-- aria-tablist-tabpanel + aria-tab-selected-state: no tabpanel, no aria-selected -->
        <div role="tablist" aria-label="Sections">
            <div role="tab" id="tab1">Tab 1</div>
        </div>

        <!-- aria-combobox-options: listbox is a sibling, not a subtree descendant -->
        <div role="combobox" aria-expanded="true" aria-label="Fruit" tabindex="0"></div>
        <ul id="listbox1" role="listbox">
            <li role="option">Apple</li>
        </ul>
    </main>
</body>
</html>

Passing example

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

treegrid_expandable_rows.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Expandable treegrid rows and tree items corpus case</title>
</head>
<body>
    <main>
        <h1>Grouped orders</h1>
        <!-- WAI-ARIA treegrid pattern: aria-expanded on a parent row is the
             pattern's own state, not an accordion trigger (#655). -->
        <table role="treegrid" aria-label="Orders">
            <thead>
                <tr><th>Country</th><th>Amount</th></tr>
            </thead>
            <tbody>
                <tr aria-level="1" aria-expanded="true" tabindex="0">
                    <td>Country: AT (2 rows)</td><td>300</td>
                </tr>
                <tr aria-level="2"><td>Vienna</td><td>100</td></tr>
                <tr aria-level="2"><td>Graz</td><td>200</td></tr>
                <tr aria-level="1" aria-expanded="false" tabindex="-1">
                    <td>Country: CH (1 row)</td><td>50</td>
                </tr>
            </tbody>
        </table>

        <div role="grid" aria-label="Plain grid">
            <div role="row" aria-expanded="false" tabindex="-1">
                <div role="gridcell">Group row</div>
            </div>
        </div>

        <ul role="tree" aria-label="Files">
            <li role="treeitem" aria-expanded="false" tabindex="0">src</li>
            <li role="treeitem" tabindex="-1">README.md</li>
        </ul>
    </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.