Prohibited ARIA attributes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ARIA attribute validation corpus case</title>
</head>
<body>
    <main>
        <h1>Various ARIA attribute misuses</h1>

        <!-- aria-attr-name-invalid: not a real ARIA attribute -->
        <div aria-nonexistentattr="true">Unknown ARIA attribute</div>

        <!-- aria-prohibited-attr: aria-label is prohibited on role="presentation" -->
        <span role="presentation" aria-label="Redundant label">Decorative span</span>

        <!-- aria-allowed-attr: aria-checked is not allowed on role="img" -->
        <div role="img" aria-checked="true" aria-label="Icon">Icon</div>

        <!-- aria-roles: not a real ARIA role -->
        <div role="not-a-real-role">Invalid role value</div>

        <!-- aria-valid-attr: aria-controls present but empty -->
        <button aria-controls="" aria-label="Toggle">Toggle</button>

        <!-- aria-valid-attr-value: aria-labelledby references a non-existent id -->
        <p aria-labelledby="does-not-exist">Broken reference</p>

        <!-- aria-required-parent: role="tab" outside a tablist -->
        <div role="tab" tabindex="0">Orphan tab</div>

        <!-- aria-hidden-focus: a focusable element inside aria-hidden -->
        <div aria-hidden="true">
            <button tabindex="0">Hidden but still focusable</button>
        </div>

        <!-- aria-invalid-without-describedby -->
        <label for="email-field">Email</label>
        <input id="email-field" type="email" aria-invalid="true">
    </main>
</body>
</html>

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

        <h2>Contact</h2>
        <!-- Correctly spelled attributes; aria-description is a WAI-ARIA 1.3
             attribute that browsers already map -->
        <label for="email">E-mail address</label>
        <input id="email" type="email" autocomplete="email" aria-describedby="email-hint" aria-description="Required for orders">
        <p id="email-hint">We only use it for order confirmations.</p>

        <!-- The referenced hint exists but is hidden: referring to hidden
             content is allowed (accname 1.2, step 2B) -->
        <label for="phone">Phone number</label>
        <input id="phone" type="tel" autocomplete="tel" aria-describedby="phone-hint">
        <p id="phone-hint" hidden>Only used for delivery questions.</p>

        <!-- aria-errormessage only matters while aria-invalid is true -->
        <label for="zip">Postal code</label>
        <input id="zip" type="text" autocomplete="postal-code" aria-invalid="false" aria-errormessage="zip-error">

        <!-- Valid tokens, including the boundary values of each value type -->
        <button type="button" id="mute" aria-pressed="mixed">Mute notifications</button>
        <button type="button" id="filter" aria-expanded="undefined">Filter</button>
        <div id="privacy-heading" role="heading" aria-level="3">Privacy</div>
        <div id="storage" role="meter" aria-label="Storage used" aria-valuenow="2.5" aria-valuemin="0" aria-valuemax="1e1">2.5 of 10 GB</div>
        <a href="/settings" id="current" aria-current="page">Settings</a>

        <!-- Attributes the role supports; a native checkbox with ARIA it does
             not duplicate -->
        <input type="checkbox" id="agree" aria-describedby="agree-hint">
        <label for="agree">Share my wish list</label>
        <p id="agree-hint">Friends with the link can see it.</p>
        <div role="checkbox" id="newsletter" tabindex="0" aria-checked="false" aria-label="Newsletter"></div>

        <!-- Naming is allowed on region and navigation -->
        <section id="data-section" aria-label="Your data">
            <p id="lead">Your data stays with us.</p>
        </section>

        <!-- Each group owns a different element -->
        <div role="group" id="owner-a" aria-label="Billing" aria-owns="billing-address"></div>
        <div role="group" id="owner-b" aria-label="Shipping" aria-owns="shipping-address"></div>
        <p id="billing-address">Main Street 1, 12345 Sampletown</p>
        <p id="shipping-address">Harbour Road 7, 12345 Sampletown</p>

        <!-- Collapsed: the controlled panel may only be created on opening
             (WAI-ARIA 1.2 combobox/disclosure, ACT 6a7281) -->
        <button type="button" id="more-btn" aria-expanded="false" aria-controls="more-panel">More options</button>
        <button type="button" id="less-btn" aria-expanded="true" aria-controls="less-panel">Fewer options</button>
        <div id="less-panel">Only the essentials are shown.</div>
    </main>
    <footer>
        <p>Example shop</p>
    </footer>
</body>
</html>