Bug 84: Dependent Selects Without Aria (Chaos: F68 + F37)

WCAG 4.1.2 (Name, Role, Value) + 3.2.2 (On Input) | Cascading select menus without ARIA.

Failure F68: Dependent Selects Not Connected

Location Selection

Issues:

  • No indication State depends on Country selection
  • No aria-controls or aria-owns establishing relationship
  • No aria-label explaining dependency
  • Screen reader users don't know to select Country first
  • City dropdown includes options from all countries/states
Failure F37: Unexpected Context Change on Selection

Product Configuration

Issue: When user selects category, the form may:

  • Reload/change unexpectedly without warning
  • Show/hide form fields without announcement
  • Change the form's submit action
  • Clear previously entered data
CHAOS: Multiple Levels + No Aria-Busy or Indicator

Multi-Level Configuration (No Loading Indicator)

Issues:

  • Three levels of dependency, no clear relationship
  • Disabled selects don't explain why (needs aria-label)
  • No aria-controls indicating control relationship
  • No aria-busy during loading
  • No aria-live for dynamic updates
  • Screen reader users confused about sequence
Better Approach (For Reference)
<!-- BETTER: Clear relationship and feedback --> <div class="form-group"> <label for="country">Country</label> <select id="country" aria-controls="state-select"> <option value="">-- Select Country --</option> <option value="usa">United States</option> <option value="canada">Canada</option> </select> </div> <div class="form-group"> <label for="state">State/Province</label> <select id="state-select" aria-label="State or Province (dependent on Country selection)" aria-busy="false"> <option value="">-- Select Country First --</option> </select> </div> <div aria-live="polite" aria-atomic="true"> Loading states for selected country... </div>
HAL Fixes: HAL adds aria-controls from parent select to dependent selects. HAL adds aria-label explaining dependencies. HAL ensures disabled selects have aria-label explaining why. HAL adds aria-busy and aria-live for dynamic updates. HAL disables dependent selects until parent is selected.