Dropdowns with no accessible name: naming a select

What a select name is

A <select> announces its role and its current value. Without a name, that is all a screen reader user gets: “combo box, United Kingdom”. Whether that is a shipping country, a billing country or a language is left to them to work out.

The name comes from a <label>, from aria-label or aria-labelledby, or from title. It does not come from the first <option>: a “Choose a country” placeholder is announced as the current value, not as a label, and it disappears the moment a selection is made.

What squirrel checks

One check, select-name, at severity error and weight 8. It covers every <select> on the page.

A name is accepted from a non-empty aria-label, an aria-labelledby pointing at an element with text, a <label for="..."> matching the element’s id, an ancestor <label> with text, or a non-empty title.

• Fail with N select element(s) without accessible names. Every offender is listed as select[name="country"], select#country or a bare select.
• Pass with N select element(s) have accessible names.
• Info with No select elements found.
• select-name-unconfirmed warns with N select element(s) without accessible names may be hidden by a style (unconfirmed) for an unnamed select a style may hide in a way squirrel cannot settle.

Hidden selects

A select out of the accessibility tree has nothing to announce, so it is not reported: one with the hidden attribute (except hidden="until-found"), aria-hidden="true" on itself or an ancestor, display: none on itself or an ancestor (set inline or by a <style> rule squirrel can decide), or inside a closed <dialog> or an unopened popover. It still needs a name before it is shown. When every unnamed select is skipped this way, the pass reads All select elements in the accessibility tree have accessible names, with hiddenWithoutName in its details.

squirrel reads the markup, inline styles and the page’s <style> blocks, the same way as form-labels; see form-labels for what it can and cannot decide. External stylesheets are not read. A select that carries a no-js class, itself or on an ancestor other than <html>, is reported as unconfirmed on a page with an external stylesheet or an @import, because a theme usually hides that fallback with a rule such as .js .no-js { display: none } once JavaScript runs.

How to fix it

<label for="country">Shipping country</label>
<select id="country" name="country" autocomplete="shipping country">
  <option value="">Choose a country</option>
  <option value="GB">United Kingdom</option>
</select>

A visible <label> is the best answer, because it also makes the words clickable. Where the layout has no room, aria-label on the <select> does the job.

A native <select> styled to look like a custom dropdown still needs its name on the <select> element itself, not on the wrapper that provides the visuals.

Enable / disable

Disable this rule

[rules]
disable = ["a11y/select-name"]

Disable all Accessibility rules

[rules]
disable = ["a11y/*"]

Enable only this rule

[rules]
enable = ["a11y/select-name"]

enable replaces the default ["*"], so this is the only rule selected. Leave disable out: a rule that matches any disable pattern is skipped even when enable names it. Only an enabled setting under a rule’s own [rule_options] table overrides both lists.

Related rules

• a11y/form-labels: the same requirement across inputs and textareas.
• a11y/aria-input-field-name: custom dropdowns built with role="combobox" or role="listbox".
• a11y/aria-required-children: a role="listbox" with no options inside it.
• a11y/autocomplete-tokens: the autofill token a country or state select should carry.

Accessibility findings ship in every audit next to the SEO, performance and agent experience rules. See Website security scan with AI for how an agent works through a report.

References

• The select element, MDN
• Labeling controls, W3C WAI tutorials
• Understanding SC 4.1.2 Name, Role, Value, W3C

Check your site

Run squirrel audit https://example.com and open the Accessibility section of the report. Every unnamed select is listed, with no cap on the count. Signed-out local audits need no account and cost nothing. Signed-in audits spend credits.