Label select elements clearly

***This document provides helpful tips to improve your site's accessibility. While it doesn’t guarantee 100% compliance, it’s a great starting point to make your website more inclusive and user-friendly.***

Identification

Select elements must have accessible names (Rule ID: select-name)

Applicable Standards

• WCAG 2.0, 2.1, 2.2 Level A (4.1.2)

• Section 508 (1194.22)

• Trusted Tester (5.C)

• EN 301 549 (9.4.1.2)

Impact

Critical level impact affecting:

• Blind users

• Low vision users

• Users with mobility impairments

Proper Implementation

Select elements must have labels using one of these methods:

• Explicit labeling using label with for and id attributes

• Implicit labeling by wrapping select with label

• aria-label for invisible labels

• aria-labelledby for complex labeling scenarios

Examples of Correct Usage

1. Explicit Labeling with <label> and for Attribute:
   

   The <label> is explicitly associated with the <select> element using the for attribute and the matching id, ensuring screen readers can identify the purpose of the dropdown.

2. Implicit Labeling by Wrapping the <select> with <label>:
The <select> is wrapped within a <label> element, implicitly associating the label text with the dropdown for proper accessibility.

3. Using aria-label for Invisible Labels:
   The aria-label provides an invisible label for the <select> element, making it accessible when a visible label is not desirable.

4. Using aria-labelledby for Complex Labeling:
   The aria-labelledby attribute references an existing element (<span> in this case) as the accessible label for the <select> element, which is useful when custom layouts are used.

5. Grouping Related Options with <optgroup>:
The <optgroup> elements group related options under a label, improving screen reader navigation for dropdowns with multiple categories.

Common Errors to Avoid

1. Missing Label:
   The <select> element lacks an associated label, making it inaccessible for screen reader users who cannot determine its purpose.

2. Mismatched for and id Attributes:
   The for attribute in the <label> references a non-existent id (country-select), failing to associate the label with the dropdown.

3. Using Placeholder Text as a Label:
   Placeholder text ("Choose your country") is not a substitute for a proper label, as it disappears when an option is selected, leaving no accessible label for screen readers.

4. Inaccessible Custom Dropdowns:
   Custom-styled dropdowns without proper ARIA roles, labels, or keyboard navigation are inaccessible to screen reader and keyboard-only users.

5. Using Only Visual Cues for the Label:
   The visible text ("Choose your country") is not programmatically associated with the <select> element, making it inaccessible to screen readers.

Rationale

• Screen readers need programmatic labels to identify form fields

• Visual proximity isn't sufficient for accessibility

• Labels eliminate ambiguity for all users

• Essential for proper form navigation and completion

• Helps users understand input requirements

Evaluation Method

1. Inspect the Code

   • Verify that the <select> element has a visible or programmatically associated label.

   • Check for proper use of for and id attributes, or ensure that aria-label or aria-labelledby is used correctly.
     
     

2. Test with a Screen Reader

   • Use a screen reader (e.g., NVDA, JAWS, or VoiceOver) to navigate the form.

   • Ensure the label is announced when the <select> element receives focus.

Evaluation Checklist