Number input
The number input React Carbon component has been tested against the latest W3C Web Content Accessibility Guidelines (WCAG) 2.1 Level A and AA success criteria and violations have been identified as high priority issues. This document will be updated when these accessibility issues are resolved.
How it works
The number input components are form fields that are provided for user input of numerical data. The validation message should be included to advise the user of numbers that are input incorrectly or a required field that is missing. The optional helper text should be used to provide instructions to help users understand how to complete the numeric field as well as indicate any required and optional input, data formats, and other relevant information.
Accessibility considerations
- Provide labels and instructions that are clear and concise.
- Provide instructions for completing the field. For example, Passwords must contain at least 8 letters and/or numbers.
- If the number input is a required field include the aria-required property and indicate that it is a required field and use the validation message for input errors.
Resources
- W3C Web Tutorial: Labeling Controls.
- W3C Web Tutorial: Form Instructions.
- IBM Accessibility Checklist Checkpoint:
- 1.3.1 Info and Relationships (WCAG Success Criteria 1.3.1)
- 3.3.1 Error Identification (WCAG Success Criteria 3.3.1)
- 3.3.2 Labels and Instructions (WCAG Success Criteria 3.3.2)
- 3.3.3 Error Suggestion (WCAG Success Criteria 3.3.3)
- 4.1.2 Name, Role, Value (WCAG Success Criteria 4.1.2)
Accessibility testing
Automated, manual and screen reader accessibility verification test has been performed on the number input React Carbon component. WCAG 2.1 Level A and AA success criteria issues have been identified and the list of open accessibility violations is available 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