Rule ID: ace-form-select-name

Verify that select dropdown elements have an accessible name through labels or ARIA attributes

WCAG 2.0 (A) - WCAG 2.2 (A) 4.1.2: Name, Role, Value Blind Low Vision Mobility Legal Risk

What This Rule Checks

When users navigate forms on a website, especially those using screen readers, they rely on clear labels to understand what each form element represents. Select elements (dropdowns) must have associated labels to ensure accessibility. If labels are not programmatically linked to the select element, users with disabilities may struggle to identify its purpose.

Who Is Affected

This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Low Vision users, who may use screen magnification, custom fonts, or high-contrast modes; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.

Why This Matters

Unlabeled select elements are announced as “combobox” or “listbox” with no context about what the user should choose. This violates WCAG 4.1.2 and 1.3.1, and is particularly confusing when a page contains multiple dropdowns.

How to Fix

Use the label Element with the for and id Attributes:

The most common and recommended way to associate labels with select elements is by using the label element along with the for attribute that corresponds to the select element’s id attribute.

Wrap the label Around the select Element:

Another acceptable method is wrapping the label element directly around the select element, creating an implicit association.

Use aria-label for Invisible Text Labels:

If the select element already has a visible label but needs an additional programmatically defined label for screen readers, use the aria-label attribute.

Use aria-labelledby to Associate Multiple Elements:

If more than one label applies to a select element, or you want to reference an external element as the label, you can use the aria-labelledby attribute.

Code Examples

Incorrect Markup Solutions:

Code example

<!-- Select with no label -->
<select id="country">
  <option>USA</option>
  <option>Canada</option>
</select>

Copy

Correct Markup Solutions:

Code example

<!-- Select with explicit label -->
<label for="country">Country</label>

<select id="country">
  <option>USA</option>
  <option>Canada</option>
</select>

Copy

Common Mistakes to Avoid

Using a first <option> as a pseudo-label (e.g., “Select country…”) without an actual <label>.
Relying on placeholder option text as the only accessible name.
Wrapping the select in a div with text but no programmatic label association.

AI Auto-Fix Available

This rule supports ACE™ AI Auto-Fix. When a violation is detected, ACE can automatically generate a code fix for review. The AI analyzes the specific element in context and proposes a targeted remediation that preserves your existing markup and styling. You can preview, modify, and approve the fix before it is applied.

Tip: Form accessibility is one of the most common sources of accessibility complaints. Every form control must have a programmatically associated label that is visible and descriptive. Test every form with keyboard-only navigation.

Related WCAG Criteria

4.1.2: Name, Role, Value