Building AccessibleForms
How we built accessible form components for Formbricks, our favourite open source experience management tool
Formbricks is a privacy-first experience management platform built on the largest open source survey tool worldwide.
Paper and Pain has proudly collaborated with Formbricks since 2023, helping improve customer experience, research and develop new features, and promote inclusive design and accessibility.
What we did
- Accessibility audit
- Form design
- Documentation
- VPAT
- Continuous support
We published a detailed case study on "The Accessibility Apprentice", our free monthly newsletter.
Overview
Accessible forms
Accessible forms are designed to predict, prevent, and mitigate errors, make sure that temporary setbacks do not turn into permanent blockers, and create opportunities for communication, conversion, and exchange.
Components
Input fields
No other element is quite as essential to a form as an input field—an interactive component that receives and validates user data. Input fields come in all shapes and sizes, from single line text fields to checkboxes and radio buttons, with most inputs comprising two basic elements—an interactive field and a label, the former being, perhaps, one of the most frequently misused form element ever.
We designed input fields that clearly convey what input is expected and signal their state to the user.
- 1 Above the field description
- 2 Required
- 3 Leading icon
- 4 Trailing icon
- 5 Character counter
- 6 Under the field description
Components
Error messages
The primary purpose of an error to inform the user of the system’s state and guide them to recovery, so good error messages have to be visible, clear, and helpful. Good error messages use colour in combination with a noticeable highlight, an icon, or both, making a field with an error stand out.
Complex forms have error summaries
Every error is clear and visible. Easy to spot, easy to fix
Adaptivity
Right-to-left
RTL support entails adapting the interface and respecting the user’s reading and browsing patterns: consistently aligning elements, reversing progress bars and scales, flipping directional controls, and adjusting font size.