Skip to content

A11Y Cheat Sheet

Powered byA11y University

Forms & errors

A Dropdown Menu Has No Name

A screen reader announces the dropdown but not what it's for, so people can't tell which choice they're making.

select-nameWCAG 2.0Introduced in WCAG 2.0.Level AA — the minimum. Missing it blocks people outright.

Status
CriticalCritical — Someone can complete the task only with great difficulty or outside help.CurrentScanners run this rule today.
Owner
DesignDevContentTest
Audit
Automated+ManualA scanner finds it; a person confirms the fix.

Why it matters

A dropdown, or select, needs a name in code. That name is usually a visible label. Screen readers read it out so people know what to pick.

Without a name, people hear only "combo box" or the current option. They have to guess, or give up on the form.

Who it affects

Who it affects, and how much
WhoWhat they experienceImpact
Screen reader usersThey hear "combo box, Australia" with no clue whether it's their country, delivery address or billing address.High impact
Voice control usersThey can't say "click State" because the dropdown has no name to call it by.High impact
Low-vision users (magnification)With zoom on, a label floating far away or missing makes the dropdown's purpose hard to find.Partial impact
Cognitive and neurodivergent usersIf there's no visible label either, they must work out the question from the options alone.Partial impact

Business & product impact

Business & product impact, with how much each claim weighs
AreaWhyImpact
LegalIt fails WCAG 4.1.2 at Level A, the minimum. Complaints under Australia's Disability Discrimination Act point to WCAG, and EN 301 549 applies in Europe.High impact
ConversionUnnamed dropdowns for size, quantity, state or payment stop people finishing checkout and sign-up forms.High impact
SEONo real search benefit — don't sell it as one.Low impact
Brand trustA form people can't complete feels careless, and users remember it.Moderate impact
Cost to fixUsually a one-line fix. Fix it in the shared form component and every form improves.High impact

Fixing it in code

Connect a visible label

Don't

<span>State</span>
<select id="state">
  <option>NSW</option>
  <option>VIC</option>
</select>

A screen reader says: “NSW, combo box”

Do

<label for="state">State</label>
<select id="state">
  <option>NSW</option>
  <option>VIC</option>
</select>

A screen reader says: “State, NSW, combo box”

The for attribute ties the label's words to the dropdown.

A dropdown with no room for a visible label

Don't

<select>
  <option>Sort by price</option>
  <option>Sort by newest</option>
</select>

A screen reader says: “Sort by price, combo box”

Do

<select aria-label="Sort products">
  <option>Sort by price</option>
  <option>Sort by newest</option>
</select>

A screen reader says: “Sort products, Sort by price, combo box”

aria-label gives a name when a visible label truly won't fit.

Designer's handoff note

Give every dropdown a visible label that stays on screen, placed above or beside it.

Don't rely on the first option, like "Choose…", as the label. It disappears once someone picks.

Quick test

Tool

NVDA (opens in a new tab) (free for Windows)

Checklist

Pass
You hear what the dropdown is for, like "State, NSW, combo box".
Fail
You hear only the option and role, like "NSW, combo box".

Check these at the same time

What a green scan still misses

A scanner checks that a name exists. It can't tell whether the name is clear, or matches the visible label voice users will say.

Reference

Rule ID
select-name
Raised by
  • axe-core: “Select element must have an accessible name”
WCAG
Other standards
EN 301 549 9.4.1.2 · RGAA 11.1.1
Last reviewed
14 October 2026