select-name

<select> elements should have accessible names.

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 programmatically gather information about input objects, and it hinders assistive technologies from accurately parsing and reading the content.

Examples

• Success:

  • The <select> element does not have an accessible name.

• Failure:

  • The <select> element is labeled using the aria-label attribute.

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.

Tags

cat.forms, wcag2a, wcag412, wcag131, section508, section508.22.n, ACT

References

• WCAG 1.1.1: Non-text Content
• WCAG 1.3.5: Identify Input Purpose
• WCAG 4.1.2: Name, Role, Value
• Deque University: select-name
• Accessibility Insights: select-name
• Evinced Digital Accessibility Knowledge Base: select-name