But what if you can’t use a form? Inaccessible forms create barriers that prevent people taking action on your site, leading to frustration.
We created a webinar which goes into great depth about web form accessibility, and in this article we discuss appearance, semantics, and interactivity of forms.
1. Appearance: Designing visually accessible forms
The visual design of a form impacts its usability and accessibility. Accessible forms should be easy to understand at a glance, providing a clear and intuitive layout.
Key principles for appearance:
- Label placement: Position labels above or to the left of form fields to ensure they’re visible and associated with their respective input fields.
- Consistent layout: Maintain alignment and spacing to make forms predictable and scannable.
- Use adequate contrast: Ensure sufficient contrast between text and background (WCAG 1.4.3 Contrast Minimum).
- Clear grouping: Use whitespace or visual dividers to separate sections like billing and shipping addresses.
Practical tips
- Avoid relying on placeholders as labels; they disappear during typing and can confuse users.
- Highlight required fields visually and clearly indicate optional ones.
Further reading
2. Semantics: Structuring forms for accessibility
This section is a bit technical, so talk to your web developer about implementation.
Semantics ensure that forms are logically structured and easily interpreted by assistive technologies. Screen readers rely on semantic HTML to guide users through a form effectively.
Key principles for semantics:
- Correct labeling: Use the
<label>element with theforattribute to associate labels with input fields. For example:htmlCopy code<label for="email">Email Address:</label> <input type="email" id="email" /> - Group related fields: Use
<fieldset>and<legend>to organize sections of a form. This helps screen readers identify groups of related inputs, such as payment or shipping details. - Accessible input types: Use HTML5 input types like
type="email",type="tel", andtype="date"to reduce errors and improve usability, particularly on mobile devices. - Error messaging: Provide specific, actionable error messages, such as “Enter a valid email address.” Use ARIA live regions (
role="alert") to ensure these messages are announced dynamically.
Practical tips
- Use
aria-required="true"for required fields, but also ensure a visual indicator is present. - Avoid ambiguous labels like “Name”; instead, specify “First Name” and “Last Name.”
Further reading
3. Interactivity: Ensuring usability and navigation
Interactivity focuses on how users navigate and interact with forms, particularly those relying on a keyboard or assistive technology. Accessible interactivity ensures everyone can complete your forms smoothly.
Key principles for interactivity:
- Keyboard navigation: Ensure forms can be completed using only a keyboard. The tab order should follow the visual flow of the form.
- Focus indicators: Make it clear which field a user is focused on, often by outlining the input box.
- Skip links: Allow users to skip directly to the form on long pages.
- Dynamic content handling: Ensure dynamic elements like error messages or popups are announced by screen readers using ARIA live regions.
Practical tips
- Test your forms with both keyboard and screen reader navigation.
- Provide “Save and Continue Later” options for longer forms to improve usability.
- Use progressive disclosure: show additional fields only when they are relevant, such as when a user selects “Yes” to a conditional question.