Skip to main content

select-name

<select> element must be assigned an accessible name.

Severity: Critical

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

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback!

Talk to an Expert
Download Copy