Form
How it works
The form React Carbon component can contain any number of React Carbon components that are used to obtain input data from a user. Validation messages should be included to advise the user of data that is input incorrectly or a required field that is missing information. Helper text should also be used to provide instructions to help users understand how to complete the form fields as well as indicate any required and optional input, data formats, and other relevant information. See the individual form components for additional information.
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.
- Provide labels and instructions that are clear and concise.
- Carbon Components should be used to create the form fields.
- Provide instructions for completing the field. For example, passwords must contain at least eight 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.
- Although the form component passes accessibility testing, content authors need to ensure all content that is added to the form is accessible.
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
Accessibility issues are tracked in the Carbon Component GitHub repository. For screen reader test results refer to the Accessibility guidance for each Carbon Component form control used.
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