Skip to main content
All website issues
Ease of Use

Dropdown menus are missing labels

What this means for your business

Dropdown menus on your forms don't have visible labels or accessible names. Screen reader users can't tell what each dropdown is for — and the missing label also makes the form confusing for anyone using keyboard navigation.

How to fix it
Easy
20–40 minutes

  1. 1Dropdown menus (<select> elements) on your page are missing accessible names — the label that tells a screen reader user what the dropdown is for.
  2. 2The correct fix is to pair every <select> with a <label>: <label for="country">Country</label><select id="country">...</select>
  3. 3The "for" attribute on the label must match the "id" on the select element exactly.
  4. 4If a visible label isn't appropriate, you can add an aria-label directly to the select: <select aria-label="Sort products by">
  5. 5Test by clicking the label text — if the dropdown activates, the connection is working. Also test with a screen reader or the Chrome accessibility tree inspector.

On WordPress

In WPForms, Gravity Forms, or Contact Form 7, each form field includes a label setting. Make sure the Label field is filled in for every dropdown — don't leave it empty even if you use placeholder text.

On Shopify

In your theme's liquid templates, check every <select> element in forms, filtering, and sorting sections. Add a <label> element or aria-label attribute to any select that doesn't have one.

Pro tip: Never rely on a surrounding <option disabled>Select an option</option> as a label substitute. That placeholder disappears as soon as a user makes a selection, leaving the field completely unlabelled.

Does your site have this problem?

SiteSprout scans your site, tells you which issues you actually have in plain English, and keeps watch so nothing breaks silently.

Scan your site free