As a student, I fill out digital forms on a weekly basis. Whether they represent class opinion surveys, a school talent show registration, or entries for a Broadway ticket lottery, I always appreciate when digital forms are easy to use.
Given the popularity of digital forms, it's important to design them with accessibility in mind.
Luckily, popular form builder programs such as DocuSign, JotForm, and Google Forms take care of the heavy lifting.
To help you with the rest, I've put together my top tips to help you build an accessible form for your organization.
Design Checklist for Accessible Digital Forms
Digital forms tend to be straightforward with features like demographic fields, multiple-choice questions, text boxes, and signatures. Despite their simple nature, there are still important things to remember when putting together your form.
Keep these following tips in mind to create an accessible, painless digital experience for your form respondents!
Use Clear, Easy Language
Your form instructions should use simple, easy-to-understand language. Instructions should be short-and-sweet; they should be just detailed enough for users to understand the tasks. This helps users focus on filling out the form without experiencing fatigue or confusion.
Choose a Basic Template
Make sure your form template is clean and easy to digest. Don't overload it with distracting pictures or complex question formats. The best forms are quick, easy, and simple.
Your form template should also have adequate color contrast between the text and background. Otherwise, someone like me may struggle to read the questions.
Consistent Navigation
Being legally blind, I appreciate when navigation between questions and pages is predictable. This saves me time since I don't have to visually scan the page to search for the arrow/Next buttons.
Limit Visually-Demanding Question Formats
Certain questions that use grids, tables, or too many dropdowns can be overwhelming for my eyes.
For example, matrix questions force me to constantly go back and forth between the bubble and its corresponding axes labels. When possible, I find simple multiple choice answers much easier to navigate.
Include Proper Labels
Your form should write out labels for all instructions, even if they seem obvious. Screen readers work by identifying the code labels. In order for users to effectively navigate a form, every field, link, and button should have a corresponding descriptive label.
Additionally, any pictures or graphical elements that are mandatory to understanding a form should include Alt-Text. This ensures all users can complete every step of your form!
Avoid Captcha Verification
Apparently, this acronym stands for "Completely Automated Public Turing test to tell Computers and Humans Apart" — whatever the tests stand for, I can't stand them!
CAPTCHA tests are the little puzzles at the beginning or end of forms. They'll often ask users to select all the fire hydrants or type out the scribbled word in an image.
As someone with a visual impairment, it's obnoxious to have to squint at blurry images or figure out hard-to-see codes. Even worse, screen readers cannot read these codes at all.
"What about audio test options?" you may ask. Yes, CAPTCHA now often has an audio choice but even those can be hard to understand. Not to mention, listening to an audio test isn't always convenient. If I don't have my earbuds in school, audio often isn't an option.
Clearly Indicate Errors (Use More than Red Text!)
The annoying error message — we've all been there. You click "Submit" on your form only to see the error exclamation mark. You scroll back through until you find the unanswered question written in bright red. But what happens if you're colorblind?
I've spent far too long scouring my form submissions trying to pinpoint the location of my errors. To indicate these mistakes in an accessible manner, your form page should:
- Return to the topmost error location
- Show bolded text that explains what the error is and how to fix it
- Include elements other than red text that make the error location clear. These could include formatting the incomplete section using an error icon, an outline box, or the underlining tool
Save User Answers
As I said before, I'm not a stranger to the error page. It's really frustrating when a form clears all your previous answers because of one error you made. Then, you have to redo all the work you did during your first attempt.
Making users re-fill all the form sections can leave them exhausted; some users may even give up and exit the form! If possible, keep your respondents engaged by saving their answers if they make an error.
Not only does it keep users like me happy but it also helps me find the errors I made. This way, I can learn and possibly avoid a similar error in the future.
Ensure Mobile Usability
I complete more than half of my forms with my mobile smartphone! Make sure to test your form using a mobile device to ensure that it works well. Many programs like Qualtrics even have a mobile accessibility checker to alert you if question formats won't correctly transfer to the mobile experience.
Confirm Successful Form Submissions
Alt-Text: Stamp inscription that reads "Mission Complete"
This is an obvious but important step! Use large bold text to notify participants that they have submitted the form completely and can exit the form page. If applicable, include information about the next steps or resources.
Expand Your Digital Accessibility!
Accessible forms are an important element of a fully accessible website!
Interested in learning more about how to design accessible digital experiences? Check out our beginner's guide on the basics of web accessibility and begin your journey today!
