select-name

<select> element must be assigned an accessible name.

Description

<select> elements, like other HTML controls, require an accessible name for assistive technology users to understand their purpose and interact with them effectively. This can be achieved through an associated <label> element or labeling aria attributes (aria-label, aria-labelledby).

Why is it important?

A <select> element allows users to choose from a set of options, but without an accessible name, people relying on assistive technologies are unable to determine its purpose. The accessible name is crucial for assistive technologies to label, announce, and interact with UI elements such as buttons, links, and input fields. Without a label relationship or redundant text serving as a label, screen readers cannot determine information, and it hinders assistive technologies from accurately parsing and reading the content.

How to fix?

Use one of the following attributes with the <select> elements to provide it an accessible name: title, aria-label or aria-labelledby. Or, use the <label> element either explicitly using the for and id attibutes or implicitly by wrapping it around the <select> element.

References

• WCAG 1.1.1: Non-text Content
• WCAG 1.3.5: Identify Input Purpose
• WCAG 4.1.2: Name, Role, Value
• Accessibility Insights: select-name