David Saxberg, our former Inclusion Advisor, writes about his experiences using web forms.
There is nothing more frustrating than filling out a form on a website if the form is not accessible. As a screen reader user, I’ve had to face this more than a couple of times. It becomes particularly frustrating when you know you must give this information; for example, if you’re applying for a job and you know you can do the job, but you can’t submit the application.
So, what can you do about this?
Well, in my case I will struggle through the form by using the arrow keys, finding the text fields, and entering the information. Then I just hope that the form works when I submit it. Sometimes this works, and other times it doesn’t. Here are my tips to remove barriers when it comes to creating and publishing online forms.
1: All necessary form fields must have an asterisk
Place an asterisk (*) next to each compulsory field. The screen reader will announce the asterisk and the user will know they must complete the field. Additionally, the asterisk must have a distinct colour contrast so it can be located visually.
2: Label each form field clearly
It is important to label each field with a title and description, so the user knows how they are expected to fill in the field. This is especially important when a user needs to tab back and forth through the fields that make up the web form. Also make sure the outline of the text boxes is clearly visible for partially sighted individuals.
3: Use a radio button
If you only have a small number of options to choose from, or if there is a yes or no question, you can use a radio button. This is a box that can be ticked or unticked. Please remember to label the radio buttons clearly. Use a bold or distinct colour for the font so users with partial sight can find the button and check it has been selected.
4: Terms and conditions verification
The terms and conditions must be in the same font size and colour as the rest of the online form. If not, users will not be able to understand what they are agreeing to.
5: Submission
When I reach the end of a form and I am happy with all my responses then I can see the light at the end of the tunnel. But wait! There is just one more question: how many cars are in the picture?
A user with good vision can complete this test. In some cases, there is an audio challenge for blind or visually impaired users, but there is a better solution.
As a developer you can offer the check box, ‘I am not a robot’, or if you require additional security, you could ask a simple maths-based question, such as, ‘What is the sum of two plus three?’ and in the next text field I would enter my answer of five.
Once all your information is entered and the security question answered, please add a button to review and submit. This is important especially if this is a long online form. It allows a user to check their responses and edit information before the final submission.
6: Unanswered questions
It is important to highlight missed compulsory questions. Highlight each of these questions on the next page and provide a link to return to the relevant section. This will make it easy for a user to accurately complete the form.
7: Confirmation of submission
Once submitted, a section on the next page should confirm that your form has been submitted. Additionally, if you must provide an email address, an automatic email with a reference number should be sent to that address acknowledging that the form is completed.
8: Save and exit
Another feature to add into a web-based form is a ‘save and exit’ button, or a ‘save and continue’ button. This is important for users who have cognitive impairments or may only be able to sit in front of the form for a brief period. Additionally, this is useful for people that are time poor and can only complete certain sections at time. The ‘save and continue’ button is great if your internet connection drops out or your device’s battery goes flat. This way you can log back in and not lose your place in the form. It will save the user the trouble of having to re-enter all the information.
By implementing these 8 tips for accessible and inclusive web forms, and improving your user experience, your organisation will go a long way to ensuring that users will return to your website. At the end of the day, isn’t that is what we all want: a great inclusive experience for all, regardless of a user’s ability?
