Select
Select is for choosing a single option from a dropdown menu of predefined choices.
Page navigation navigation
Accessibility and usability expectations
Presentation
Cognition
- A
Select
must have a clear, descriptive, and permanently visible label that helps users understand the purpose of the input and the relationship between the available options - The label should be placed above the
Select
. If there is additional information about the options, it should be provided as a caption underneath the select Select
placeholders must not be used as substitutes for labels. Placeholders should be used sparingly and must not convey essential informationSelect
options should not be prefixed with emojis, as this disrupts typeahead functionality- If the
Select
’s value is invalid, users must be informed not just visually but also with a clear, descriptive error message that explains the issue and how to correct it
Vision
- The
Select
must maintain required color contrast ratios (with text meeting a minimum contrast ratio of 4.5:1, and icons/graphics meeting a minimum contrast ratio of 3:1) - A custom focus style must be visible and meet minimum contrast standards to aid users with low vision
Mobility
- The control must meet minimum target size requirements (24 by 24 CSS pixels) to accommodate users with limited motor control
Adaptability
- Text resizing and spacing adjustments must be supported without loss of readability or function
- The
Select
component must be usable without horizontal scrolling, at a viewport size of 320 by 256 CSS pixels
Interaction
- A
Select
must not trap keyboard focus - The
Select
must not trigger a context change upon receiving focus or selecting an option unless this is expected and clearly communicated
Keyboard
- Unless
disabled
, aSelect
must be focusable using theTab
key - Options within the
Select
must be navigable and selectable via keyboard
Engineering for AT compatibility
Screen reader
- The input must have an associated
<label>
to provide an accessible name for screen readers - Additional descriptive content about the options should be programmatically associated with the input, typically using
aria-describedby
- The
Select
must expose the correct role (combobox
), state (e.g.expanded
/collapsed
), and value to assistive technologies - If the
Select
isdisabled
, this state must also be programmatically conveyed to screen readers - Any invalid state must be programmatically indicated, and an accompanying error message must be discoverable by assistive technologies
Speech recognition
- The visible label must match or be included in the accessible name, allowing speech recognition users to operate the
Select
by speaking the visible label - If the label is visually hidden, an equivalent visible label elsewhere on the page must exist to ensure operability by speech recognition users
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 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 theid
of the<select>
- The label appears above the
Select
, and if there is a caption it appears below theSelect
- 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 anaria-required="true"
- If the component has a caption, the caption is rendered as an additional container underneath the
<select>
, and the<select>
has anaria-describedby="…"
pointing to theid
attribute of the container - If the component has validation, the message is rendered as an additional container underneath the
<select>
, and the<select>
has anaria-describedby="…"
pointing to theid
attribute of the container- If the component has error validation, the rendered
<select>
includes thearia-invalid="true"
attribute, and the rendered icon is an alert - If the component has success validation, the rendered
<select>
includes thearia-invalid="false"
attribute, and the rendered icon is a check
- If the component has error validation, the rendered
- If the component is disabled, the rendered
<select>
includes thedisabled
HTML attribute