Creating accessible forms is not just a choice; it's a necessity. Many seemingly simple web forms can pose significant challenges for users with disabilities. This blog will guide you through some fundamental principles that will help you craft user-friendly forms that follow accessibility best practices.
Form Instructions
Provide clear, straightforward instructions that help users understand how to complete the form and the individual form controls.
Providing overall instructions before the <form> element is critical to ensure that screen readers read them aloud before the user switches to "forms mode."
In addition to overall instructions, include instructions within the labels of the form controls.
For example, make it clear which form fields are essential. If an asterisk (*) is used to mark required fields, include it directly within the field label like this: <label for="email">* Email:</label> Remember to explain what the asterisk means at the beginning of the form.
Other critical form field instructions include:
- All fields marked "required" must be completed.
- Dates should all be typed in the format mm/dd/yyyy, (as in 07/04/2024).
- Passwords must contain at least 8 letters, 2 numbers, and 1 special character such as * & % $ #
- Additional help can be found by clicking the question mark link immediately following each field.
For more details on proper form instructions, please read the Form Instructions tutorial from the W3C.
Descriptive <label> Tag
The <label> element establishes a programmatic association between a descriptive text label and a form control. This connection functions independently of visual cues, ensuring screen reader users can understand the purpose of the control.
When the <label> element is not available, ARIA attributes (aria-labelledby or aria-label) offer an alternative solution. These attributes provide the necessary information for screen readers to announce the descriptive text when a user interacts with the form control. Use ARIA only as a fallback if no HTML element is available.
Create clear, concise labels in plain language, and do not use placeholder text. Placeholder text is often low contrast and extremely difficult to see, and it disappears when the user starts typing, which can confuse some.
Organizing form fields into groups based on what they ask for makes the form easier to navigate. This way, users can concentrate on smaller, more manageable sections instead of facing a long list of everything at once.
For example, the HTML code below renders a registration form with the fields Name and Email grouped into "Personal Information," and the group "Login Details" includes the fields for Username and Password.
|
<body> <fieldset> <fieldset> <button type="submit">Register</button> </form> |
|
Keyboard Navigation
Some people only use a mouse, so make sure your web form can be navigated with a keyboard. The tabindex attribute ensures your form follows a logical tab order, allowing users to navigate through fields in proper logical order using the keyboard tab key.
Use clear visual cues or focus indicators, with proper color contrast, to indicate the selected field, helping users stay oriented. Remember, the first focusable element should have a tabindex of "0."
User Validation
Client-side validation with JavaScript can improve the user experience, but it shouldn't be the sole gatekeeper.
The form should validate user entries for email address, website URL, date, and phone number format to help prevent errors early on. To accomplish that, use HTML5 validation attributes like required, pattern, and minlength.
And always provide clear and informative error messages. For example, Tim Neusesser and Evan Sunwall of the Nielsen Norman Group tell us that good error messages include:
- An explicit indication that something has gone wrong.
- Human-readable language, not codes or symbols.
- Polite phrasing that doesn't blame users.
- Precise descriptions of exact problems.
- Constructive advice on how to fix the problem.
Responsive Design
Accessibility extends beyond desktop browsing. Ensure your forms are responsive and function flawlessly across different devices and screen sizes. Users with motor impairments might rely on touchscreens, so optimize your form layout for touch interaction.
By implementing these technical best practices, you can build accessibility within your web forms. Remember, a well-crafted form improves user experience, expands your reach, and strengthens your content marketing efforts.
The following WCAG Success Criteria can help you in creating a more accessible and easy-to-use web form:
- 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 the 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)
