No tab marked as selected

aria/tab-selected-missing

WCAG success criterion: 4.1.2 (level A)
Outcome class: Hint only. An automated check that by design reports review hints only: its findings are marked for manual review, never as confirmed violations.
Area: Accessibility, Technical Robustness
Default severity: low
axe-core rule: aria/tab-selected-missing

Why we flag this

Screen reader users are not told which tab is active and which one the visible content belongs to.

tablist without a tab carrying aria-selected="true".

What the rule checks

Scope. Tablists (not aria-multiselectable) in the accessibility tree that own at least one tab.

Expectation. Review once per tablist when no tab carries aria-selected="true": nobody learns which tab is active. Tabs without the attribute are correctly unselected by default, so the rule does not report each tab; ARIA states SHOULD, so this is a review, not a violation. A tablist with one selected tab passes. Hidden subtrees are out of scope.

Source. WCAG 2.2 SC 4.1.2 Name, Role, Value; WAI-ARIA 1.2 tab (aria-selected) and tablist; APG Tabs pattern

Detection: shared; needs dom, ax_tree.

Failing example

The check flags this for review. Corpus case aria_and_widgets. The page may contain further findings for other rules.

aria_and_widgets.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ARIA and widget corpus case</title>
</head>
<body>
    <main>
        <h1>ARIA relationships, widget state, and tab semantics</h1>

        <button aria-label=""><svg aria-hidden="true" width="10" height="10"></svg></button>

        <div role="alert" aria-live="polite">A critical error occurred</div>

        <div role="slider" aria-label="Volume" tabindex="0"></div>

        <div role="tablist">
            <div role="tab" id="tab1" aria-controls="panel1">First tab (missing aria-selected)</div>
            <div role="tab" id="tab2" aria-selected="false" aria-controls="panel1">Second tab</div>
        </div>
        <div role="tabpanel" id="panel1">Panel content</div>
    </main>
</body>
</html>

Passing example

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

aria_widgets_valid.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Trail running shoe - Example shop</title>
</head>
<body>
    <header>
        <p>Example shop</p>
    </header>
    <main>
        <h1>Trail running shoe</h1>

        <!-- One tab selected, panel present -->
        <div id="product-tabs" role="tablist" aria-label="Product information">
            <button type="button" role="tab" id="tab-desc" aria-selected="true" aria-controls="panel-desc">Description</button>
            <button type="button" role="tab" id="tab-reviews" aria-selected="false" aria-controls="panel-desc" tabindex="-1">Reviews</button>
        </div>
        <div id="panel-desc" role="tabpanel" aria-labelledby="tab-desc">Lightweight shoe with a grippy sole.</div>

        <!-- Expanded combobox referencing its popup; a collapsed one needs no
             reference -->
        <label for="size">Size</label>
        <input id="size" type="text" role="combobox" aria-expanded="true" aria-autocomplete="list" aria-controls="size-options">
        <ul id="size-options" role="listbox" aria-label="Sizes">
            <li role="option" id="size-42" aria-selected="false">42</li>
            <li role="option" id="size-43" aria-selected="false">43</li>
        </ul>
        <label for="colour">Colour</label>
        <input id="colour" type="text" role="combobox" aria-expanded="false" aria-autocomplete="list">

        <!-- The native select has its popup built in -->
        <label for="qty">Quantity</label>
        <select id="qty"><option>1</option><option>2</option></select>

        <!-- A visible menu named by its heading -->
        <h2 id="sort-label">Sort reviews</h2>
        <div id="sort-menu" role="menu" aria-labelledby="sort-label">
            <div role="menuitem" id="sort-new" tabindex="0">Newest first</div>
            <div role="menuitem" id="sort-best" tabindex="-1">Best rated</div>
        </div>

        <!-- popovertarget points at a (closed, hence hidden) popover -->
        <button type="button" id="guide-btn" popovertarget="size-guide">Size guide</button>
        <div id="size-guide" popover>EU 42 equals UK 8.</div>

        <!-- Expanded button naming the region it controls -->
        <button type="button" id="care-btn" aria-expanded="true" aria-controls="care-text">Care instructions</button>
        <div id="care-text">Clean with a damp cloth.</div>

        <!-- Tooltips referenced as description and as name -->
        <button type="button" id="fav-btn" aria-describedby="fav-tip">Add to wish list</button>
        <div role="tooltip" id="fav-tip">Saved items stay for 30 days</div>
        <button type="button" id="share-btn" aria-labelledby="share-tip"><span aria-hidden="true">&#x2197;</span></button>
        <div role="tooltip" id="share-tip">Share</div>

        <!-- Open, operable popover -->
        <div id="promo" popover="manual" aria-label="Promotion">
            <p>10 % off your first order.</p>
            <button type="button" id="promo-close">Close</button>
        </div>
    </main>
    <footer>
        <p>Example shop</p>
    </footer>
    <script>
        document.getElementById('promo').showPopover();
    </script>
</body>
</html>

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