Fieldset
The Fieldset component is used to group related form fields and includes a descriptive legend to label the group, helping users understand the relationship between these form fields.
import { ... } from '@ag.ds-next/react/fieldset';Learn more about how to meet WCAG success criteria when implementing fieldsets. This makes them accessible and inclusive for users of all abilities and situations.
The fieldset component passed accessibility testing in 2022.
Clear heading or legend
Requirements
- Headings or legends clearly identify the purpose of the fieldset.
- The purpose of the fieldset is understood and conveyed by assistive technology.
- Hint text is provided when it’s helpful.
Benefits
- Assistive technology users have equal access to headings and legends.
- Helps all users avoid submitting an incomplete or incorrect form.
- Reduces the cognitive load for all users.
- Makes filling in forms easier for people with cognitive and learning disabilities.
- Improves understanding of available options.
- Clear headings support users with English as a second language.
WCAG references
- Understanding success criteria 2.4.2 Page titled
- Understanding success criteria 2.4.6 Headings and labels
Clear labels and instructions
Requirements
- Labels are clear and descriptive in the way they describe purpose.
- The purpose of the fieldset is understood and conveyed by assistive technology.
- Hint text is provided when it’s helpful.
Benefits
- Assistive technology users have equal access to labels and instructions.
- Helps all users avoid submitting an incomplete or incorrect form.
- Reduces the cognitive load for all users.
- Makes filling in forms easier for people with cognitive and learning disabilities.
- Improves understanding of available options.
- Clear labelling supports users with English as a second language.
WCAG references
- Understanding success criterion 1.3.5 Identify input purpose
- Understanding success criterion 3.3.2 Labels or instructions