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.

• ID: accessibility-basics.keyboard-focus.accessible-name-computation

• Severity: info

• What to look for: Enumerate every relevant item. For complex interactive components (especially custom widgets or components with nested elements), verify that screen readers correctly compute the accessible name. Use an accessibility tree inspector or screen reader to confirm.

• Pass criteria: At least 1 of the following conditions is met. Complex components correctly communicate their accessible name via text, aria-label, or aria-labelledby that is perceivable to screen readers.

• Fail criteria: Complex components have confusing or missing accessible names that do not clearly identify their purpose.

• Skip (N/A) when: The application has only simple, standard components.

• Detail on fail: Identify components with incorrect names. Example: "Custom dropdown component shows 'Select' in accessibility tree instead of 'Select Country'. Data grid headers show generic 'button' instead of column name."

• Remediation: Verify and correct accessible names in complex components:

  // Bad: Generic accessible name
  <button>Select</button>
  
  // Good: Specific, descriptive accessible name
  <button aria-label="Select country from dropdown">
    {selectedCountry}
  </button>
  
  // Or use aria-labelledby
  <button aria-labelledby="country-label" aria-haspopup="listbox">
    <span id="country-label">Select a country</span>
  </button>