Digital Accessibility Knowledge Base

select-name

Select elements must have an accessible name

Who might be affected
Screen Reader
Voice Control

Description

Like other HTML controls,<select> elements require an accessible name so that assistive technology users can perceive and understand their meaning and purpose, and efficiently interact with them (by voice dictation, for example). <select> elements can get their accessible name from an associated <label> element or a labeling aria attribute (i.e., aria-label, aria-labelledby).

Note that the value of the <select> element (i.e., the “active” <option> element) is not a substitute for a valid accessible name.

Quick Fixes

Give the <select> element an accessible name using one of the following techniques:
1    <!-- Use a label tag -->
2    <label for="fruit">Select your favorite fruit</label>
3    <select id="fruit">
4        <!-- The fruit options list -->
5    </select>
6

7    <label>
8    Select your favorite game
9    <select>
10        <!-- The game options list -->
11    </select>
12    </label>
13

14    <!-- Use "aria-label" -->
15    <select aria-label="Select destination">
16        <!-- The destination options list -->
17    </select>
18

19    <!-- Use "aria-labelledby" -->
20    <p id="country-label">Country</p>
21    <select aria-labelledby="country-label">
22    <!-- The country options list -->
23    </select>
24

25    <p id="date-label">Date</p>
26    <select id="date-options"
27            aria-label="Select one"
28            aria-labelledby="date-options date-label">
29    <!-- The date options list -->
30    </select>

How Users Are Affected

The accessible name is used by assistive technologies to label, announce and trigger actions of interactable UI elements (e.g. buttons, links, input fields). When interactable elements don’t have a valid accessible name, assistive technologies lack the hook they are designed to use to parse and read the content accurately.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
1.1.1 Non-text Content (A) | 1.3.5 Identify Input Purpose (AA) | 4.1.2 Name, Role, Value (A)