Select element must have an accessible name
Estimated effort: about 10 minutes.
Dropdown menus (the <select> element) need a name that a screen reader can announce, such as "Country" or "Sort by". Without one, a screen reader user hears only "combo box" with no indication of what they are choosing, which is especially confusing on checkout forms with several dropdowns in a row.
How to fix it
- Find the <select> element that has no associated label (common on checkout country/state dropdowns and product-listing sort/filter dropdowns).
- Add a <label> element with a "for" attribute matching the select's id, e.g. <label for="billing_country">Country</label> paired with <select id="billing_country">.
- If a visible label would break the layout (e.g. a compact "Sort by" control), add an aria-label attribute directly on the <select>, e.g. aria-label="Sort products by".
- If the label text already exists elsewhere on the page (for example inside a fieldset legend or a preceding heading), reference it with aria-labelledby="id-of-that-text" instead of duplicating text.
- Reload the page and confirm the <select> now has a name by inspecting the Accessibility tree in browser dev tools, or by tabbing to it with a screen reader running.
Before and after
Before
Checkout country dropdown with no programmatic name:
Country:
<select id="billing_country">
<option value="US">United States</option>
<option value="CA">Canada</option>
</select>
Product-listing sort dropdown with no name at all:
<select id="orderby">
<option value="price">Price: low to high</option>
<option value="popularity">Popularity</option>
</select>
After
<label for="billing_country">Country</label>
<select id="billing_country">
<option value="US">United States</option>
<option value="CA">Canada</option>
</select>
<select id="orderby" aria-label="Sort products by">
<option value="price">Price: low to high</option>
<option value="popularity">Popularity</option>
</select>