The Accessible Forms Checklist
Recently, during a discussion, I was talking to my design partner, Monika, about the inaccessibility of government websites in India. I got stuck at a form that requires a captcha, and without sighted help, there is no way to move forward. Monika also brought up an interesting point about how most government sites are built for citizens to avail different schemes, apply for jobs, and access other grants. As a result, users need to fill out forms with a lot of data, and these forms do not allow the user to save and return to fill the form at a later stage.
If the webpage with the form crashes during filling, then all the data is lost. Our discussion circled back to the topic of creating accessible forms, and during that small talk, we created this accessible forms checklist based on the content we already have on DigitalA11Y.
Introduction:
In today’s digital landscape, nearly every web or mobile application incorporates at least one form. Whether it’s for user registration, feedback, or any other interactive feature, forms play a crucial role in collecting information from users. However, not all users navigate the digital realm in the same way, and it’s essential to ensure that forms are accessible to everyone, including those with disabilities.
This checklist for accessible forms serves as a comprehensive guide, offering necessary guidance and serving as a starting point for developers and designers looking to enhance the accessibility of their forms. By following these recommendations, you can make your forms usable by a broader audience and contribute to a more accessible online environment.
Form Controls:
- Provide visible labels for each form control.
- Associate visible labels programmatically to their form controls using HTML or ARIA techniques.
- Make labels descriptive enough for users to take necessary action.
- Group related form controls with a group-level visible label.
- Use aria-describedby attribute for additional instructions associated with form fields.
- Use native HTML form controls for default accessibility with assistive technologies.
- If possible, provide a graphic icon in the label to help persons with cognitive disabilities.
- Provide instructions below the form control & associate them using aria-describedby to the form control
Placeholders:
- Avoid Placeholders if possible
- If using placeholders as a replacement for visible labels, consider one of the floating label methods.
- Ensure placeholder color contrast meets WCAG requirement of 4.5:1.
- Do not provide critical instructions with a placeholder attribute.
Error Handling:
- Change the title of the page to include “Alert: Form has errors” for immediate user awareness.
- Provide a heading (preferably H1) for the text identified as a common error message.
- Visually style errors to be distinguishable and clear for users, including those with low vision.
- Ensure errors specify the form field with issues and provide a short note on how to fix them.
- Include a same-page link for users to jump directly to the form field with the error.
- Present errors in text format for accessibility.
- Ensure clear and informative error messages for user understanding.
- Avoid relying solely on visual cues like color or icons; provide alternative methods.
- Shift focus to the first form control with an error or the common error message.
- Associate inline errors with form fields using aria-describedby attribute.
- Provide appropriate suggestions; for example, offer a valid email format instead of a generic “invalid email” message.
This accessible forms checklist will serve as an initial guide during the creation of forms for your next project. While there may be many other best practices, this can serve as the starting point to make your form accessible to a larger audience.
Related Reads
- Can Placeholder Make a Difference in Form Accessibility?
- Complete Guide to Marking Required Fields in Forms
- Accessibility Best Practices for Creating Form Designs
- Best Practices for Form Validation and Error Messages
