Chapter 43: ARIA States & Properties 🎛️

Expansion & Selection States

Dynamic widget state orchestration: `aria-expanded`, `aria-selected`, `aria-checked` (tri-state), and `aria-pressed`.

LEARNING OBJECTIVES ⌵

Correctly apply and dynamically update aria-expanded="true|false" on disclosure controls, navigation drawers, and accordions.
Distinguish between selection (aria-selected), check states (aria-checked), and toggle press states (aria-pressed).
Implement tri-state checkbox logic using aria-checked="mixed" alongside JavaScript indeterminate state properties.
Connect reactive CSS styling directly to ARIA state attributes (button[aria-expanded="true"]) for bulletproof Single Source of Truth architecture.

🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation

🌐

1. Input

Directives & Tags

⚙️

2. Parse

Tokenizer & AST

🌳

3. Layout

Box Model & Flow

🎨

4. Render

GPU Paint & Composite

PHASE 1: INPUT & DIRECTIVES

Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story (Intuitive Foundation)

Think of a luxury airplane cockpit. In front of the pilot are dozens of specialized physical switches and indicators:

The Foldable Landing Gear Lever (aria-expanded): The switch indicates whether a massive mechanical subsystem is currently deployed (open) or retracted into the fuselage (closed).
The Radio Frequency Selector (aria-selected): A dial where one out of five preset channels is actively highlighted and tuned in.
The Cargo Fire Suppression Arming Switch (aria-checked): A tri-state toggle switch that can be Disarmed (false), Armed (true), or in Partial Diagnostic Test Mode (mixed).
The Cockpit Dome Light Pushbutton (aria-pressed): A momentary button that physically locks in when turned on and pops out when turned off.

When blind pilots fly in flight simulators using synthetic auditory telemetry, the auditory computer must immediately announce:

"Landing gear lever, expanded" or "Landing gear lever, collapsed".
"VHF 1, Tab 1 of 4, selected".
"Master Cargo Bay Arming, mixed".
"Night Vision Illumination, toggle button, pressed".

If a web developer opens an accordion dropdown visually with CSS transitions but forgets to toggle aria-expanded="true" in JavaScript, sighted users see the menu open, but the screen reader announces: "Navigation menu, collapsed, button". The user presses Enter expecting to open the menu, but hears nothing, assuming the application is broken.

Technical Deep Dive & Specifications

The Four Major Interactive ARIA States

+---------------------------------------------------------------------------------------------------+
|                                     ARIA INTERACTIVE STATE MATRIX                                 |
+---------------------+-------------------------------+---------------------+-----------------------+
| Attribute           | Valid Values                  | Allowed Roles       | Typical UI Widget     |
+---------------------+-------------------------------+---------------------+-----------------------+
| aria-expanded       | "true" | "false"              | button, combobox,   | Accordions, Drawers,  |
|                     |                               | treeitem, menuitem  | Navigation Drawers    |
+---------------------+-------------------------------+---------------------+-----------------------+
| aria-selected       | "true" | "false" | "undefined"| tab, option,        | Tab Panels, Listboxes,|
|                     |                               | gridcell, row, tree | Data Grids            |
+---------------------+-------------------------------+---------------------+-----------------------+
| aria-checked        | "true" | "false" | "mixed"    | checkbox, radio,    | Nested Checkboxes,    |
|                     |                               | switch, menuitemchk | Permission Trees      |
+---------------------+-------------------------------+---------------------+-----------------------+
| aria-pressed        | "true" | "false" | "mixed"    | button              | Toggle buttons (Mute, |
|                     |                               | (Toggle buttons)    | Bold, Favorite Star)  |
+---------------------+-------------------------------+---------------------+-----------------------+

1. `aria-expanded`: Disclosure & Hierarchical Controls

The aria-expanded state indicates whether the target container controlled by an element is visually displayed or collapsed.

[Button: aria-expanded="false"] ---- Click / Enter ----> [Button: aria-expanded="true"]
              |                                                         |
              v                                                         v
  [Panel: hidden / display:none]                           [Panel: visible / display:block]

Placement Rule: aria-expanded belongs on the trigger element (the button initiating the change), never on the collapsible container itself.
Specification Rule: When collapsed, the controlled content must either be removed from the DOM, hidden with hidden, or styled with display: none.

2. `aria-selected` vs. `aria-checked` vs. `aria-pressed`

Engineers frequently confuse these three states. Here is the strict W3C disambiguation:

                                  STATE DISAMBIGUATION
                                            |
        +-----------------------------------+-----------------------------------+
        |                                   |                                   |
   Is it a TAB / LISTBOX               Is it a CHECKBOX / SWITCH          Is it a TOGGLE BUTTON
   member in a composite widget?       with binary/tri-state values?      that turns on / off?
        |                                   |                                   |
        v                                   v                                   v
  aria-selected                       aria-checked                        aria-pressed
 (e.g. Tab 1 of 3)                  (e.g. [x] Terms)                    (e.g. [Mute Audio])

3. The Tri-State Checkbox (`aria-checked="mixed"`)

When building parent-child checkbox hierarchies (e.g., selecting all permissions in a category), the parent checkbox has three distinct visual and semantic states:

Unchecked (false): Zero child items are selected.
Checked (true): All child items are selected.
Indeterminate / Mixed (mixed): Some, but not all, child items are selected.

       [ - ] Select All Notifications  (aria-checked="mixed", indeterminate=true)
         ├── [X] Email Notifications   (aria-checked="true")
         ├── [ ] SMS Notifications     (aria-checked="false")
         └── [X] Push Notifications    (aria-checked="true")

Critical DOM API Note: HTML <input type="checkbox"> elements have an IDL property checkbox.indeterminate = true. However, indeterminate is a JavaScript property only—there is no HTML attribute <input indeterminate>. For custom ARIA checkboxes (<div role="checkbox">), you must explicitly declare aria-checked="mixed".

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Line 51 (aria-expanded="false"): Declares the initial collapsed state to assistive technologies.
Line 52 (aria-controls="acc-panel-1"): Explicitly links the trigger button to the content container ID.
Line 58 (role="region" aria-labelledby="acc-btn-1"): Turns the accordion panel into a landmark labeled by its trigger header.
Line 59 (hidden): Removes the collapsed panel from visual layout AND the accessibility tree.
Line 94 (btn.setAttribute('aria-expanded', String(!isExpanded))): Toggles the ARIA state atomically with the visual hidden attribute.
Line 115 (parent.indeterminate = true; parent.setAttribute('aria-checked', 'mixed')): Synchronizes both the browser native UI rendering (indeterminate = true) and the accessibility tree (aria-checked="mixed").

Expected Browser Render Output

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Accordion & Tri-State Playground</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 24px; }
    
    /* CSS driven directly by ARIA states */
    .accordion-trigger {
      display: flex;
      justify-content: space-between;
      width: 100%;
      max-width: 450px;
      padding: 12px 16px;
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
    }
    
    .accordion-trigger[aria-expanded="true"] {
      background: #e2e8f0;
      border-bottom-color: transparent;
    }

.accordion-trigger .chevron {
      transition: transform 0.2s ease;
    }

.accordion-trigger[aria-expanded="true"] .chevron {
      transform: rotate(180deg);
    }

.accordion-panel {
      max-width: 450px;
      padding: 16px;
      border: 1px solid #cbd5e1;
      border-top: none;
      background: #ffffff;
    }

.accordion-panel[hidden] {
      display: none;
    }

.tri-box {
      margin-top: 32px;
      border: 1px solid #cbd5e1;
      padding: 16px;
      max-width: 450px;
    }
  </style>
</head>
<body>

<h2>FAQ Accordion</h2>
  <div class="accordion-item">
    <button 
      id="acc-btn-1" 
      class="accordion-trigger" 
      aria-expanded="false" 
      aria-controls="acc-panel-1"
      onclick="toggleAccordion(this)"
    >
      <span>What is the W3C AccName algorithm?</span>
      <span class="chevron" aria-hidden="true">&#x25BC;</span>
    </button>
    <div 
      id="acc-panel-1" 
      class="accordion-panel" 
      role="region" 
      aria-labelledby="acc-btn-1" 
      hidden
    >
      <p>The AccName specification defines how browsers calculate accessible names from DOM nodes, attributes, and subtree contents.</p>
    </div>
  </div>

<div class="tri-box">
    <h3>Notification Settings</h3>
    <div>
      <input type="checkbox" id="parent-chk" onclick="toggleParent(this)">
      <label for="parent-chk"><strong>Select All Notifications</strong></label>
    </div>
    <div style="margin-left: 24px; margin-top: 8px;">
      <div>
        <input type="checkbox" class="child-chk" id="chk-email" checked onchange="updateChildState()">
        <label for="chk-email">Email Updates</label>
      </div>
      <div>
        <input type="checkbox" class="child-chk" id="chk-sms" onchange="updateChildState()">
        <label for="chk-sms">SMS Text Alerts</label>
      </div>
      <div>
        <input type="checkbox" class="child-chk" id="chk-push" checked onchange="updateChildState()">
        <label for="chk-push">Mobile Push Notifications</label>
      </div>
    </div>
  </div>

btn.setAttribute('aria-expanded', String(!isExpanded));
      
      if (isExpanded) {
        targetPanel.setAttribute('hidden', '');
      } else {
        targetPanel.removeAttribute('hidden');
      }
    }

// Tri-State Checkbox Synchronization
    function updateChildState() {
      const children = Array.from(document.querySelectorAll('.child-chk'));
      const parent = document.getElementById('parent-chk');
      const checkedCount = children.filter(c => c.checked).length;

if (checkedCount === 0) {
        parent.checked = false;
        parent.indeterminate = false;
        parent.removeAttribute('aria-checked');
      } else if (checkedCount === children.length) {
        parent.checked = true;
        parent.indeterminate = false;
        parent.removeAttribute('aria-checked');
      } else {
        parent.checked = false;
        parent.indeterminate = true;
        parent.setAttribute('aria-checked', 'mixed');
      }
    }

function toggleParent(parent) {
      const children = document.querySelectorAll('.child-chk');
      children.forEach(c => c.checked = parent.checked);
      parent.indeterminate = false;
      parent.removeAttribute('aria-checked');
    }

// Initialize initial child state on load
    updateChildState();
  </script>
</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

[Visual Display Initial]
[ What is the W3C AccName algorithm?              ▼ ] (Collapsed)

[Notification Settings]
[ - ] Select All Notifications  (Indeterminate dash icon)
   [x] Email Updates
   [ ] SMS Text Alerts
   [x] Mobile Push Notifications

[Screen Reader Announcement on Focus]
Accordion Button: "What is the W3C AccName algorithm?, Collapsed, Button"
Parent Checkbox: "Select All Notifications, Mixed, Checkbox"

🏋️ Hands-On Exercise

🎯 The Challenge: Build an Accessible Toggle Mute Button & Tabstrip

Instructions:

Create an audio toggle button using aria-pressed="false" and the visible text "Mute Microphone".
Add JavaScript logic: When clicked, toggle aria-pressed between "true" and "false", and update the button text to "Microphone Muted" or "Mute Microphone".
Style the button with CSS using the attribute selector button[aria-pressed="true"] so it turns red with white text.
Create a 2-tab navigation strip (role="tablist") with two tabs (role="tab"): "General Settings" and "Security Settings".
Set aria-selected="true" on the active tab and aria-selected="false" on the inactive tab. Ensure tabindex="0" is on the active tab and tabindex="-1" on the inactive tab (Roving Tabindex).

🏁 Starter Code Sandbox

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

STARTER CODE SANDBOX exercise.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mute Toggle & Tab Solution</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 20px; }
    
    /* Toggle button styling */
    .toggle-btn {
      padding: 10px 18px;
      font-size: 1rem;
      font-weight: 600;
      border: 2px solid #0284c7;
      background: #f0f9ff;
      color: #0369a1;
      border-radius: 6px;
      cursor: pointer;
    }
    .toggle-btn[aria-pressed="true"] {
      background: #dc2626;
      border-color: #991b1b;
      color: #ffffff;
    }

    /* Tabstrip styling */
    .tablist {
      display: flex;
      gap: 4px;
      border-bottom: 2px solid #cbd5e1;
      margin-top: 30px;
    }
    .tab {
      padding: 10px 16px;
      border: none;
      background: transparent;
      cursor: pointer;
      font-weight: 500;
      border-bottom: 2px solid transparent;
      margin-bottom: -2px;
    }
    .tab[aria-selected="true"] {
      color: #0284c7;
      border-bottom-color: #0284c7;
      font-weight: 700;
    }
  </style>
</head>
<body>

  <!-- Audio Toggle Button -->
  <button 
    id="mic-toggle" 
    class="toggle-btn" 
    type="button" 
    aria-pressed="false"
    onclick="toggleMic(this)"
  >
    Mute Microphone
  </button>

  <!-- Settings Tabstrip -->
  <div class="tablist" role="tablist" aria-label="Account Settings Tabs">
    <button 
      id="tab-1" 
      class="tab" 
      role="tab" 
      aria-selected="true" 
      aria-controls="panel-1" 
      tabindex="0"
      onclick="selectTab(this)"
    >
      General Settings
    </button>
    <button 
      id="tab-2" 
      class="tab" 
      role="tab" 
      aria-selected="false" 
      aria-controls="panel-2" 
      tabindex="-1"
      onclick="selectTab(this)"
    >
      Security Settings
    </button>
  </div>

  <div id="panel-1" role="tabpanel" aria-labelledby="tab-1" style="padding: 16px;">
    General Preferences content...
  </div>
  <div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden style="padding: 16px;">
    Security & Credentials content...
  </div>

  <script>
    function toggleMic(btn) {
      const isPressed = btn.getAttribute('aria-pressed') === 'true';
      btn.setAttribute('aria-pressed', String(!isPressed));
      btn.textContent = !isPressed ? 'Microphone Muted' : 'Mute Microphone';
    }

    function selectTab(selectedTab) {
      const tabs = document.querySelectorAll('[role="tab"]');
      const panels = document.querySelectorAll('[role="tabpanel"]');

      tabs.forEach(tab => {
        const isCurrent = tab === selectedTab;
        tab.setAttribute('aria-selected', String(isCurrent));
        tab.setAttribute('tabindex', isCurrent ? '0' : '-1');
      });

      panels.forEach(panel => {
        if (panel.id === selectedTab.getAttribute('aria-controls')) {
          panel.removeAttribute('hidden');
        } else {
          panel.setAttribute('hidden', '');
        }
      });
    }
  </script>
</body>
</html>

Why this works:

aria-pressed="false|true" correctly announces toggle state changes (e.g. "Microphone Muted, Toggle Button, Pressed").
The tabs implement the WAI-ARIA Tab Pattern with role="tablist", role="tab", aria-selected, aria-controls, and roving tabindex.
CSS is bound strictly to [aria-pressed="true"] and [aria-selected="true"], preventing UI de-synchronization bugs.

⚠️ Common Pitfalls

Placing aria-expanded on the Container Instead of the Trigger: Putting aria-expanded="false" on the <div> being collapsed is invalid ARIA. aria-expanded belongs strictly on the interactive <button> that controls the state.
Using Non-Boolean Strings: Writing aria-expanded="expanded" or aria-selected="yes". ARIA states strictly require the string literals "true" or "false" (or "mixed" where supported).
Failing to Manage tabindex with aria-selected: In tablists, only the currently selected tab should have tabindex="0". All other tabs must have tabindex="-1" so the user can navigate cleanly via arrow keys without bloating the Tab key sequence.

💡 Pro Tips

Zero-Class State Styling: Avoid writing separate CSS helper classes like .is-active or .is-open. Use CSS attribute selectors: button[aria-expanded="true"] and .tab[aria-selected="true"]. This forces developers to maintain accessible ARIA states because visual styles will break immediately if ARIA is omitted!
Avoid aria-expanded on Modal Dialog Triggers: When a button opens a modal <dialog>, do not use aria-expanded. Modals change focus context rather than expanding an inline subtree; aria-haspopup="dialog" is the correct semantic indicator.

📌 Key Takeaways

aria-expanded communicates disclosure/accordion state ("true" vs "false") on the trigger control.
aria-selected communicates which element is active inside composite widgets (role="tablist", role="listbox", role="tree").
aria-checked supports tri-state values ("true", "false", "mixed") for complex permission and file-tree hierarchies.
aria-pressed turns standard <button> elements into accessible binary toggle buttons.
Binding CSS rules directly to ARIA attribute selectors ensures visual presentation and accessibility semantics remain perfectly synchronized.
--

⭐ LEARN: HTML 🌟 ⚔️ QUIZ BATTLE ARENA // ACTIVE

? Question 1 / 3

Which element should hold the `aria-expanded` attribute in an accordion component?

Topic: HTML Fundamentals

? Question 2 / 3

What value must `aria-checked` receive when some, but not all, sub-checkboxes in a group are selected?

Topic: HTML Fundamentals

? Question 3 / 3

Why is styling UI with `button[aria-expanded="true"]` considered a senior frontend engineering best practice?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

The Four Major Interactive ARIA States

1. aria-expanded: Disclosure & Hierarchical Controls

2. aria-selected vs. aria-checked vs. aria-pressed

3. The Tri-State Checkbox (aria-checked="mixed")

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Build an Accessible Toggle Mute Button & Tabstrip

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

Which element should hold the aria-expanded attribute in an accordion component?

What value must aria-checked receive when some, but not all, sub-checkboxes in a group are selected?

Why is styling UI with button[aria-expanded="true"] considered a senior frontend engineering best practice?

1. `aria-expanded`: Disclosure & Hierarchical Controls

2. `aria-selected` vs. `aria-checked` vs. `aria-pressed`

3. The Tri-State Checkbox (`aria-checked="mixed"`)

Which element should hold the `aria-expanded` attribute in an accordion component?

What value must `aria-checked` receive when some, but not all, sub-checkboxes in a group are selected?

Why is styling UI with `button[aria-expanded="true"]` considered a senior frontend engineering best practice?