Ensure select element has an accessible name

All <select> elements must have an accessible name to ensure that users relying on assistive technologies can understand their purpose and interact with them effectively.

About This Rule

This guideline ensures that <select> elements have accessible names, enhancing usability for individuals relying on assistive technologies. Adhering to this practice aligns with the following standards:

• WCAG 2.1 (A): 4.1.2 Name, Role, Value
• WCAG 2.0 (A): 4.1.2 Name, Role, Value
• WCAG 2.2 (A): 4.1.2 Name, Role, Value
• Section 508: 1194.22 (n) - When electronic forms are designed to be completed online, they shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.
• Trusted Tester: 5.C
• EN 301 549: 9.4.1.2 Name, Role, Value

Why It Matters

Accessible names for form elements like <select> are crucial for users with disabilities, particularly those using screen readers. Without proper labeling, these users may struggle to understand the function of the dropdown, leading to confusion and potential errors when completing forms. Providing clear and descriptive labels enhances usability and ensures compliance with accessibility standards. ([dequeuniversity.com](https://dequeuniversity.com/rules/axe/4.10/select-name?application=RuleDescription&utm_source=chatgpt.com))

How to Fix

To provide accessible names for <select> elements:

• Use Explicit <label> Elements: Associate a <label> with the <select> using the for attribute, which matches the id of the <select>.
  

  <label for="state">State:</label>
  <select id="state">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <!-- More options -->
  </select>

• Use Implicit <label> Elements: Wrap the <select> element with a <label> to implicitly associate them.
  

  <label>
    State:
    <select>
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
      <!-- More options -->
    </select>
  </label>

• Use aria-label Attribute: If a visual label is not present, provide an accessible name using the aria-label attribute.
  

  <select aria-label="State">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <!-- More options -->
  </select>

• Use aria-labelledby Attribute: Reference an existing element that serves as the label using the aria-labelledby attribute.
  

  <div id="state-label">State:</div>
  <select aria-labelledby="state-label">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <!-- More options -->
  </select>

Examples

Incorrect

A <select> element without an accessible name:

<select>
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <!-- More options -->
</select>

Correct

A <select> element with an associated <label>:

<label for="state">State:</label>
<select id="state">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <!-- More options -->
</select>

More Information

• W3C: Form Labels
• H44: Using label elements to associate text labels with form controls