Forms are commonly used to provide user interaction in websites and web applications. For example, login, registering, commenting, and purchasing. This tutorial shows you how to create accessible forms. The same concepts apply to all forms, whether they are processed client or server-side.
Labeling Controls: Use the
<label>element, and, in rare cases, the
titleattribute, to indentify each form control.
Grouping Controls: Use the
<legend>elements to group and associate related form controls.
Form Instructions: Provide instructions to help users understand how to complete the form and individual form controls.
Validating Input: Validate input provided by the user, and provide options to undo changes and confirm data entry.
User Notifications: Notify users about successful task completion, any errors, and provide instructions to help correct mistakes.
Multi-Page Forms: Divide long forms into multiple smaller forms that constitute a series of logical steps or stages and inform users about their progress.
Custom Controls: Use stylized form elements and other progressive enhancement techniques to provide custom controls.
Why is this important?
Forms can be visually and cognitively complex and difficult to use. Accessible forms are easier to use for everyone, including people with disabilities.
People with cognitive disabilities can better understand the form and how to complete it, as making forms accessible improves the layout structure, instructions, and feedback.
People using speech input can use the labels via voice commands to activate controls and move the focus to the fields that they need to complete.
People with limited dexterity benefit from large clickable areas that include the labels, especially for smaller controls, such as radio buttons and checkboxes.
People using screen readers can identify and understand form controls more easily because they are associated with labels, field sets, and other structural elements.
Related WCAG2.0 resources
1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
2.4.6 Headings and Labels: Headings and labels describe topic or purpose. (Level AA)
3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)
4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)