Select

Overview

Screen readers are able to distinguish between buttons and links, providing different control options for various HTML elements. It is essential to preserve the original purpose of the element and pass it on to the screen reader.

Semantic Markup

Selects are usually used to start off activities, including submitting forms, moving forward in a process, opening modals, and more. For minor operations or to get to a new page, use a inlink instead.

• It is crucial to use the correct markup depending on the goal
• Provide a clear, actionable text
• If the URL will direct to a new window or tab, it is essential to include a spoken warning in the sr-hint to avoid disorientation for users of assistive technology

WAI-ARIA

• Aria-labels should be used when there is no visible text on the page that can be used to describe the purpose of the element. This can be especially useful for elements that are interactive, such as buttons, links, and form elements, as well as for images that convey meaning but have no alternative text.
• .sr-only class is used to hide an element visually, but keep it accessible to screen readers. It is commonly used to hide elements such as form labels or instructions that are required for a11y, but are not necessary for sighted users.

Keyboard Interactions