WCAG A/AA requirement Priority: Critical

A dropdown has no label

A dropdown list has no label that assistive technology can read.

This text was translated automatically and has not been reviewed by a native speaker yet.

Why it matters to your customers

Screen reader users hear only "combo box" and do not know whether it selects size, colour, quantity or country. This can block choosing a product variant or completing an order.

Who is affected

blind customers
screen reader users
voice control users
people with cognitive disabilities

How to fix it

Connect a visible <label for> to each <select>, or use aria-labelledby pointing to visible text. Use aria-label only when no visible label is possible. Check variant pickers, sorting and country selectors.

On Shopify

Usually variant pickers, sorting or currency and language selectors in the theme. Add labels in the theme's Liquid snippets; selectors from apps need a fix by the app developer.

On Shoptet (CZ)

Usually variant or sorting selectors in the template. Ask Shoptet or a partner to add labels in the template code.

On PrestaShop

Usually product attribute selectors, sorting or country fields. Add labels in the theme's .tpl templates or overridden module templates.

On WooCommerce

Usually variation selectors, sorting dropdowns or plugin widgets. Add labels in child-theme templates or use plugin settings that output proper labels.

Standards

Standards
Standard	Clause
WCAG 2.2	4.1.2 (A) Name, Role, Value
WCAG 2.1	4.1.2 (A) Name, Role, Value
WCAG 2.0	4.1.2 (A) Name, Role, Value
EN 301 549 4.1.1	9.4.1.2
EN 301 549 3.2.1	9.4.1.2
Section 508 2017	E205.4
ДСТУ EN 301 549 2022	9.4.1.2

Automated check: axe-core rule select-name. dequeuniversity.com, github.com, www.w3.org

Text is hard to read because of low contrast
WCAG 1.4.3 AA
Some videos or sounds start playing with audio by themselves
WCAG 1.4.2 A
Custom menu items or tabs are outside their group
WCAG 1.3.1 A
Some elements use a role that does not exist
WCAG 4.1.2 A

All rules we check