axe-core select-name error select missing accessible name failed

axe-core select-name error select missing accessible name failed - how to fix it

TL;DR

A native [select] with no label, aria-label, or aria-labelledby has no accessible name, so screen reader users hear 'combo box collapsed' with no idea what it asks for. Add [label for="country"]Country[/label], or aria-label="Country" when no visible label is possible. Re-run the focused axe rule to confirm the violation is gone.

Unnamed selects are disproportionately common in filter panels and data tables, where a row of dropdowns (status, assignee, sort) is built without labels to save space. Each one fails independently, so a single filter bar can produce a dozen violations. Fix the filter component once: give it a label prop and render a visible or aria-label name per instance.

The verbatim error looks like this:

axe-core 4.x
Rule: select-name (critical)
"Select element must have an accessible name"

Element: [select id="country"]
  No accessible name computed.

Steps

1. Confirm the single-rule failure:

npx @axe-core/cli https://example.com/address --rules select-name

Expected: the unnamed select is listed under rule id select-name.

2. Check how the select is labeled today: a [label] element, an aria-label, an aria-labelledby reference, or nothing. If a label exists but is not associated (no for/id match), fix the association first.
3. Add an explicit label:

[label for="country"]Country[/label]
[select id="country"]
  [option value="us"]United States[/option]
[/select]

Or, when the design allows no visible label: [select aria-label="Country"].

4. Re-run the focused scan. Expected output: 0 violations for select-name.
5. Run the full label family to catch the same bug on sibling controls:

npx @axe-core/cli https://example.com/address --rules select-name,label-title-only,aria-input-field-name

6. Check filter bars and data tables first. These UIs generate selects in loops, and one unlabeled component multiplies into many violations:

rg -l 'select' src/components/ | head -20

(Adjust the directory and component name to match your codebase.)

7. If the design cannot show a visible label per select, use aria-label with the same text a visible label would carry, and keep the selects distinguishable: aria-label="Filter by status", aria-label="Sort order". Identical aria-labels on adjacent selects confuse everyone; make each one specific.

When to use

• Axe flags select-name on a native dropdown.
• A form's country, state, or quantity dropdown reads as an unnamed combo box in a screen reader.
• A design-system select component renders without a label slot and every instance fails.

When not to use

• The dropdown is a custom ARIA listbox/combobox built from divs (fix the ARIA pattern: roles, aria-expanded, keyboard support).
• The select has a label but the label text is vague (that is a content problem, not a select-name problem).
• The select is disabled or hidden and should not be in the form at all (remove it instead).

Why it happens

Native selects are one of the most robust accessible controls available, but only when named. An unnamed select still works with a keyboard, so the bug is invisible to sighted testers and only shows up in assistive tech, which is exactly why it survives to production and gets caught by automated scans.

Native [select] is keyboard-accessible out of the box, which creates a false sense of done. Developers test with a keyboard, everything works, and the missing name never surfaces until a scan or a screen reader user reports it. The bug is concentrated in admin UIs and dashboards, which get less design review than customer-facing pages and therefore ship more unlabeled controls.

Edge cases

• Selects inside repeated rows (address line items) need unique ids and per-row labels; a single shared label fails association for all but the first.
• aria-labelledby can point at a visible heading or legend when a [label] element does not fit the layout.
• A select whose first option is a placeholder like 'Choose...' still needs a real name; the placeholder option is not a label.
• Framework select wrappers that forward props but drop aria-label will fail every instance. Fix the wrapper, not each page.
• Multi-selects ([select multiple]) follow the same rule. Name them like single selects.
• A select whose label is provided by a nearby heading via aria-labelledby passes, but keep the association obvious in the markup for future maintainers.
• Custom dropdown components that render a [button] plus a listbox are not [select] elements; they need the ARIA listbox pattern instead of select-name.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_H-oUb8GGi3NZwI784JbRlw