Select Name

Select elements must include accessible names so users understand the purpose of the form field. This blog explains what the select-name rule checks, why accessible naming is essential for form controls, how to label select menus correctly and how this supports WCAG 2.2 and wider accessibility expectations. The article is fully original, accurate and structured using the Welcoming Web content framework.

What it is

The select-name rule checks whether <select> elements expose an accessible name. The accessible name conveys the purpose of the dropdown to assistive technologies.

Select menus may receive their name from: - a visible <label> element, - aria-label, - aria-labelledby, - form-associated naming patterns.

Without an accessible name, a screen reader may announce the element only as “combo box” without any context.

Why it matters

When a select element lacks an accessible name: - users cannot understand what choice they are being asked to make, - screen reader navigation becomes confusing and inefficient, - people with cognitive impairments may not grasp the form’s intention, - error messages and instructions become harder to interpret, - keyboard-only users cannot rely on predictable form structure.

Accessible names ensure select menus communicate clear purpose and support successful form completion.

Who delivers it

Designers specify clear labels for each form control. Content authors provide meaningful field descriptions. Front end developers pair labels and selects correctly and implement ARIA naming when needed. Accessibility specialists and QA testers verify naming across templates. Welcoming Web assists by detecting unnamed select elements.

How to ensure select elements have an accessible name

1. Use a visible <label> element

The safest and most common method is to use a label connected via for and id.

<label for="country">Country</label><select id="country">...</select>

2. Use aria-label when no visible label is appropriate

For compact layouts or icon-only interfaces.

<select aria-label="Sort options">...</select>

3. Use aria-labelledby for context-based naming

Reference visible text on the page.

<p id="filter-title">Filter by category</p><select aria-labelledby="filter-title">...</select>

4. Avoid placeholder text as the only label

Placeholders are not reliable accessible names.

5. Test with screen readers

Verify that the select element’s name is announced clearly across assistive technologies.

Best practice guidance

Provide labels that describe the exact purpose of the dropdown. Avoid generic names like “Select one” or “Choose an option”. Align naming conventions across form components and document them in design systems. Ensure labels remain visible when users zoom or switch to high-contrast modes.

Compliance mapping

Providing accessible names for select elements supports: - WCAG 2.2 Name, Role, Value success criterion, - WCAG 2.2 Labels and Instructions requirements, - ADA Title III expectations for usable forms, - EN 301 549 guidance on programmatically determinable names, - Equality Act 2010 duties for inclusive form communication.

Welcoming Web supports alignment with recognised standards but does not issue or guarantee compliance certification.

How Welcoming Web supports teams

Welcoming Web identifies unnamed select elements and highlights issues with label association. The platform provides actionable guidance on correcting naming patterns.

Key points for development teams

All select elements need an accessible name. Use labels or ARIA naming. Avoid placeholders as labels. Test naming with screen readers. Follow consistent naming conventions.

Call to action

Run an audit Check your site for select elements missing accessible names. Supports WCAG 2.2 and ADA goals.

FAQs

What does the select-name rule check

It checks whether each <select> element exposes an accessible name.

Why must select elements have names

Users must understand the purpose of the dropdown to make correct choices.

Can placeholders act as names

No. Placeholders are not reliable accessible names.

What is the best way to label a select element

Use a visible <label> linked to the select.

When should I use ARIA labels

Use them when a visible label cannot be included.

Are unnamed selects a WCAG failure

Yes, they fail Name, Role, Value requirements.

Does adding a label guarantee WCAG compliance

It supports form accessibility but does not guarantee full compliance.

How does Welcoming Web help with select naming

Welcoming Web detects unnamed selects and offers guidance to fix label association.

Disclaimer

Welcoming Web supports accessibility improvement and alignment with recognised standards but does not issue or guarantee compliance certification.