Select
How it works
The select Carbon component is a form input field, where a user is submitting data and chooses a single option from a list of options. The label element is used to explicitly associate a form control with a label. A label is attached to a specific form control through the use of the for attribute. The value of the for attribute must be the same as the value of the id attribute of the form control. Also note that the id attribute may have the same value as the name attribute, but both must be provided, and the id must be unique in the Web page.
Accessibility considerations
This component has been validated to meet the WCAG 2.0 AA and Section 508 accessibility guidelines, however changes made by the content owner can affect accessibility compliance. Be sure to review and follow the guidance in this section when updating or adding new content to this component.
- Avoid very long option names to facilitate understandability and perceivability.
- Do not use the same word or phrase at the beginning of a set of options.
- Use a unique id for each option.
- If the select field is required include the aria-required property and indicate that it is a required field and use the validation message for input errors.
Resources
- IBM Accessibility Checklist Checkpoint:
- 1.3.1 Information and Relationships (WCAG Success Criteria 1.3.1)
- 3.2.2 On Input (WCAG Success Criteria 3.2.2)
- 3.3.1 Error Identification (WCAG Success Criteria 3.3.1)
- 3.3.2 Labels or Instructions (WCAG Success Criteria 3.3.2)
Accessibility testing
Accessibility issues are tracked in the Carbon Component GitHub repository.
Automated test
- Chrome version 77.0.3865.90
- Dynamic Assessment Plugin (DAP) version 1.8.0.0 - IBM Accessibility WCAG 2.1 Sept. 2019 Ruleset
- Carbon React version 7.7.1
- No violations
macOS screen reader tests
- Chrome version 77.0.3865.90
- Carbon React version 7.7.1
- Control-Option-Right arrow to the "Select" text. VO announces the label and that it is a text element.
- Control-Option-Right arrow to the "Optional helper text". VO announces the label and that it is a text element.
- Control-Option-Right arrow to the select box. VO announces the label, "Choose an Option" and that it is a select pop-up button.
- Press the Space key. VO announces that you are on a dimmed menu item.
- Navigate up and down the menu using the arrow keys. VO announces each menu item.
- Press the Space key to make a selection.
- Tab away from the select box and then back. VO announces the selected option.
- Press Space to open the menu and then press Esc to close the menu.
Windows screen reader tests
- JAWS 18
- Firefox version 68
- Carbon React version 7.7.1
- Press Alt-Down arrow . JAWS announces the text, "Select, optional helper text".
- Tab to the select box. JAWS announces the main region, the select combo box and and that the arrow keys should be used to make a selection.
- Use the Up and Down arrow keys to navigate through the list. JAWS announces each option.
- Tab away from the select box and then back. JAWS announces the selected option.
iOS screen reader tests
- Safari version 13.1.3
- Carbon React version 7.7.1
- Swipe right, VO announces "Select main landmark".
- Swipe right, VO announces "Optional helper text".
- Swipe right to navigate to the select box. VO announces "Select. Choose an option pop-up button, double tap to activate the picker."
- Double tap to open the menu, VO does not announce anything. (Note: There is an open issue for VoiceOver on iOS.)