Accessible name computation is verified for complex components

A custom dropdown component whose accessible name computes to 'Select' rather than 'Select country' leaves screen reader users without enough context to understand the control's purpose before interacting with it. The accessible name computation algorithm (accname-1.1) traverses text content, aria-labelledby, aria-label, and title in a defined priority order — getting this wrong produces names that are either missing, duplicated, or meaninglessly generic. WCAG 2.2 SC 4.1.2 (Name, Role, Value) requires that every UI component exposes a correct name to assistive technology. Section 508 2018 Refresh 502.3.1 covers the same. The failure is non-obvious: the component may appear labeled to a sighted user, but the accessibility tree — which tools like Axe and screen readers read — computes the name from different inputs than the visual rendering.

Verify accessible names using browser DevTools Accessibility panel (Computed → Name) or the axe browser extension. For custom components, explicitly set names rather than relying on text content traversal.

// Bad: Name computes from visible text 'Select'
<button onClick={toggleDropdown}>Select</button>

// Good: aria-label overrides computed name
<button
  aria-label="Select country"
  aria-haspopup="listbox"
  aria-expanded={isOpen}
  onClick={toggleDropdown}
>
  {selectedCountry || 'Select'}
</button>

// Good: aria-labelledby points to a visible label element
<label id="country-label">Shipping country</label>
<button
  aria-labelledby="country-label"
  aria-haspopup="listbox"
  aria-expanded={isOpen}
>
  {selectedCountry || 'Select'}
</button>

// Data table column headers — verify scope is correct
<th scope="col" id="col-revenue">Revenue</th>
// Cells that reference this header
<td headers="col-revenue">$120,000</td>

Run npx axe-core or install the Axe browser extension and check the Accessibility panel in Chrome DevTools for every custom interactive widget. The 'Computed Properties' section shows exactly what name the browser computes.