The select-name rule flags <select> drop-downs that have no accessible name, so a screen reader announces "combo box, Relevance" without saying what is being chosen. The fix is a visible <label> connected to the select with for and id, or wrapped around it.
What the rule means
A drop-down needs a name that says what the choice is about – "Sort by", "Country", "Size". The option currently selected is the value, not the name. The rule passes a <select> that gets its name from:
- a
<label>whoseformatches the select'sid, or a<label>wrapped around it, aria-labeloraria-labelledby,- a
titleattribute.
It fails a select with none of these, and one whose only label is hidden with display: none. Unlike text fields, a select has no placeholder to fall back on, so a missing label shows up here even on forms whose text fields pass undefined.
The rule only checks that there is a name. "Select" or "Please choose" as the label passes, and says nothing – that part is a judgement, which is why the fact box above says "partly".
Who is affected
Blind people using a screen reader hear the current option and nothing else – "Relevance" means little without "Sort by". Voice-control users cannot say "click Country" when the drop-down has no name. People with cognitive disabilities lose track of which filter is which when several unlabelled drop-downs sit in a row, as they often do on shop category pages.
Why the check fails
- Filter and sort bars on shop category pages, where the drop-downs sit side by side with a heading or no text at all.
- The first option used as the label –
<option>Choose a country</option>– with no real label. - Custom-styled drop-downs that hide the native
<select>behind a replacement but leave it in the accessibility tree without a name. - Date-of-birth fields split into three selects (day, month, year) under one visible text that labels none of them.
- Language and currency switchers in the header or footer.
- Form plugins that print the label text in a
<div>above the field.
How to fix it
- Give every select a visible label and connect it with
forandid. - For a group of selects that share one visible heading – day, month, year – wrap them in a
<fieldset>with a<legend>, and give each select its own short label. - Fix it in the filter bar or form component, not page by page.
<!-- Before: the text sits beside the select, but nothing connects it -->
<span class="sort-bar__label">Sort by</span>
<select class="sort-bar__select" name="sort">
<option value="relevance">Relevance</option>
<option value="price-asc">Price, low to high</option>
<option value="newest">Newest first</option>
</select><!-- After: the label is tied to the select with for and id -->
<label class="sort-bar__label" for="sort-order">Sort by</label>
<select class="sort-bar__select" id="sort-order" name="sort">
<option value="relevance">Relevance</option>
<option value="price-asc">Price, low to high</option>
<option value="newest">Newest first</option>
</select>Three selects under one question get a fieldset, and each select still gets a name:
<fieldset class="dob">
<legend>Date of birth</legend>
<label for="dob-day">Day</label>
<select id="dob-day" name="dob-day"><option>1</option><option>2</option></select>
<label for="dob-month">Month</label>
<select id="dob-month" name="dob-month"><option>January</option><option>February</option></select>
<label for="dob-year">Year</label>
<select id="dob-year" name="dob-year"><option>1990</option><option>1991</option></select>
</fieldset>How to test it manually
- Click on the text next to each drop-down. If the drop-down does not get focus, the two are not connected.
- Select the drop-down in your browser's accessibility inspector (Chrome, Edge, Firefox): the "Name" should match the visible text, not the selected option.
- With a screen reader (NVDA on Windows, VoiceOver on macOS), Tab to each drop-down and listen: do you hear what is being chosen as well as the current value?
- Check that the label says something: "Please choose" names nothing.
Related WCAG criterion
The rule is mapped to three criteria, and a drop-down without a name usually touches all three: 1.3.1 Info and Relationships, because the link between the visible text and the select is not in the code; 3.3.2 Labels or Instructions, because nobody is told what to choose; and 4.1.2 Name, Role, Value, because the control has no name. All three are Level A. Related: 2.5.3 Label in Name – the name in the code must contain the visible label's words.
How Reviseberg reports it
Reviseberg runs select-name on every crawled page at 1280px. The issue list shows the rule with its severity, its WCAG criteria and level, the number of drop-downs and pages affected, and the points you get back by fixing it. The detail view gives the CSS selector, the HTML snippet and every page affected – a sort bar on every category page is one component, and one fix clears it everywhere.
You can mark a finding as "ignore", "can't fix" or "false positive" with a reason; every decision is logged. A clean result here never marks 1.3.1, 3.3.2 or 4.1.2 as passed: whether the labels say the right thing is a person's check, recorded as a manual result.