Select

Accessibility and usability expectations

A select must have a clear, descriptive, and permanently visible label that help users understand the purpose of the input and the relationship between the options in the group.

The label appears above the select. If there is additional content about the options, this should be provided as a caption underneath the select.

Select placeholders must not be used in place of labels and should be used sparingly. They also should not convey critical information.

Select options should not be prefixed with emoji, as that disrupts typeahead behaviour.

All text must meet the minimum contrast requirements of 4.5:1, except disabled options.

The select's arrow icon must have a minimum contrast ratio of 3:1 against the background.

A select must have a visible focus style. Instead of using the browser's default focus style, which can be difficult to see against certain backgrounds, a custom focus style should be implemented. A custom focus style must have a minimum contrast ratio of 3:1 against the background.

The target size and spacing of the control must be at least 24 by 24 CSS pixels.

The text must be resizable and the text spacing adjustable, and content must remain by readable, without requiring horizontal scrolling, when zoomed or viewed at a width equivalent to 320 CSS pixels.

Unless a select is disabled, it must by focusable using the Tab key, and an option can be selected using a keyboard.

A select must not trap focus or initiate a change of context when it receives focus or when an option is changed.

The input must have an associated <label> to give it an accessible name that is announced by screen readers. Additional content about the options must be easily discoverable by screen reader users - in general, by having them programmatically associated with the input using aria-describedby.

While the component allows for labels to be visually hidden, this is only permitted if there is equivalent visible text already within the page that acts as a label for the input. The accessible name must match or include the visible label so that speech recognition users can navigate to and operate the select by saying the visible label.

If the select's value is invalid, this must be programmatically conveyed, and not solely rely on visual styling (such as a colored border). In addition, the form must show a descriptive error message that provides further information to the user about what the error is, and how to correct it. See documentation for form validation for further details.

The input must convey the correct role (combobox), state, and value to screen readers.

If a select is disabled, the disabled state must be conveyed to screen readers.

Built-in accessibility features

The label, caption, arrow icons and custom focus style meet minimum contrast requirements.

The text is resizable and the text spacing adjustable. The component reflows when zoomed or viewed at a width equivalent to 320 CSS pixels.

By default, the component renders a correctly associated pair of <label> and <select> elements.

Using the the native <select> and <option> ensures that the select conveys the correct role and value and has the correct keyboard behaviour.

The caption is automatically associated with the <select> using aria-describedby.

When the select is disabled, the disabled attribute is applied and the disabled state conveyed to screen readers.

Implementation requirements

Provide a sufficiently descriptive visible label.

While the component allows for the visible label of the select to be hidden, this should only be done if there is an equivalent visible text already that acts as the label. In that case, make sure that the input's accessible name matches or contains the visible text.

How to test the component

Integration tests

• The select has a sufficiently descriptive visible label, and does not rely on the use of a placeholder option to act as the visible label
• If the <label> has been visually hidden, there is an equivalent visible text that acts as the label, and the input's accessible name matches or contains the visible text.
• If the select has error validation, it has a a descriptive error message that provides information about what the error is, and how to correct it

Component tests

• The component renders a <label> element and a <select>; the <label for="…"> attribute points to the id of the <select>
• The label appears above the select, and if there is a caption it appears below the select
• The label, caption, value and validation messages meet the minimum contrast requirements of 4.5:1
• The select's arrow icon and custom focus style meets the minimum contrast requirement of 3:1
• The content remains readable, without requiring horizontal scrolling, when zoomed or viewed at a width equivalent to 320 CSS pixels
• The control meets the minimum target size of 24 by 24 CSS pixels
• If the component is required, the rendered <label> includes an asterisk and the <select> has an aria-required="true"
• If the component has a caption, the caption is rendered as an additional container underneath the <select>, and the <select> has an aria-describedby="…" pointing to the id attribute of the container
• If the component has validation, the message is rendered as an additional container underneath the <select>, and the <select> has an aria-describedby="…" pointing to the id attribute of the container
  • If the component has error validation, the rendered <select> includes the aria-invalid="true" attribute, and the rendered icon is an alert
  • If the component has success validation, the rendered <select> includes the aria-invalid="false" attribute, and the rendered icon is a check
• If the component is disabled, the rendered <select> includes the disabled HTML attribute