Website forms are useful for email signups, logins, user generated comments, and making purchases. Forms should be simple and straightforward for all website visitors. WCAG success criteria requires that the digital experience be perceivable, operable, understandable, and robust.
The following technical considerations are applicable to all forms:
- Keyboard access: The form can be navigated entirely by keyboard. Additionally, site visitors can close a form with the Escape key and submit with the Enter key.
- Labeling: Use the
<label>element to identify each form input field. In some cases, WAI-ARIA and the title attribute can be used as well. - Grouping Controls: Use the
<fieldset>and<legend>elements to group and associate related form inputs. - Validating Input: Validate input provided by the user and provide options to undo changes and confirm data entry.
- User Notifications: Notify users about successful completion, any errors, and provide instructions to help them 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. For multi-page forms, form instructions would be helpful to users.
For popup forms, there are a few more technical considerations. When a popup form is displayed, a few things should happen:
- The popup is announced.
- The popup is assigned primary focus.
- Once the form is dismissed, the user’s focus should return to the element that spawned the popup.
When a popup appears, be sure screen reader users are informed of this action. This can be accomplished with a WAI-ARIA alert. When the content of the container element with role="alert" changes, the content that appears is automatically read aloud by screen readers.