August 30, 2021
Design
4 Simple Steps for Creating Accessible Contact Forms
There’s no point in having a contact form on your website if not everyone can use it. I recently learned a few things I was doing wrong while on my seventh week at the Google UX Design program. These changes may seem simple and easy to ignore, but as soon as I discovered how they could break or make a user’s experience, I decided to take action and make my contact form more accessible.
I’m a big supporter of simplicity and modern design. In the past couple of years, there’s been a trend of placing form labels inside input fields, mainly because they look clean and modern, so I started doing the same. The problem was that I was only looking at design from my perspective, point of view, and unique experience.
A few days ago, I realized the problem with this approach. Placing labels inside input fields can be an accessibility problem since labels within fields go away as the user starts typing. In other words, as soon as the user begins answering, the context for the answer disappears, forcing the user to erase their answer and hope for the placeholder to reappear.
An easy solution to this problem is placing form labels outside your input fields. You may ask, where’s the best place to put them? On top of the input fields. Avoid putting them on the left side, and if you do, try aligning them to the right. This simple step will make your contact forms more accessible.
If you’d like to learn more about why and how you should use placeholders and labels in contact forms, I invite you to check out a great article by Katie Sherwin from the Nielsen Norman Group called, Placeholders in Form Fields Are Harmful.
I have to be completely honest with you. I’ve struggled with colors since I began my career in design, and I know I’m not alone on this one. As soon as I thought I had figured it out, I realized that sometimes my color choices did not provide enough contrast. I could read everything just fine, but I was not passing the WCAG color contrast test.
WCAG stands for Web Content Accessibility Guidelines. The WCAG is part of a series of guidelines published by the Web Accessibility Initiative of the World Wide Web Consortium, the central international standards organization for the internet.
— Wikipedia
There’s a section dedicated to color contrast for text and images. When I first learned about this, I thought, “how come am I failing the contrast test if I can read it just fine?” I was failing once again and falling victim to my own bias. You would’ve thought I could understand visibility and readability accessibility since I’ve worn glasses since I was a kid. But I wasn’t even remotely considering that some people have a more challenging time with their vision than I do. Then I thought about my friend Joe who is red and green color blind, or my grandparents, who now have a tough time reading small text or text with a low contrast ratio.
If you’d like to make sure your text passes the WCAG color contrast test, I invite you to use the webiam.org contrast checker. It is as easy as entering your hex foreground color and your background color. This easy tool can make a huge difference in someone’s life.
I’ve experienced this one before, and though I have to admit that not to the same degree as someone who depends on a keyboard as their only input device, I am sure most seasoned internet users have encountered some problem with keyboard accessibility.
Keyboard accessibility ensures that the reading and navigating order are logical and intuitive. When you use layout tables to create visual columns on your forms, the navigation can be impaired. You can check the order of items on a page by navigating your contact form with just the “Tab” key. Additionally, if you use JavaScript to manipulate form data, change elements or submit forms, the interactions might only work with a mouse.
Also, screen reader users navigate using the “Tab” key. That’s why it is essential that the form is correctly organized and follows a logical order. You can learn more about Creating Accessible Forms from webiam.org’s article.
Last but not least, be mindful of required fields. I used not to specify which fields were needed and which were not. Users would skip some fields and encounter an error right after clicking the “submit” button. I didn’t specify it because I thought my form looked cleaner without doing so. In the end, I was giving my users some frustration.
Also, think about how you’re validating the data you’re asking for. I know it is tempting to restrict phone fields to just ten numeric characters because it works in practice when you want to make sure users type in an actual phone number. The disadvantage with this is that you assume that all phone numbers are ten characters long. This works for people in the US, but I have friends from countries where their phone numbers are only eight or nine characters long. Do we want to exclude them? I don’t think so. So think about how you can validate some of the fields.
Another example is zipcodes or postal codes. I have a friend from Canada, where their postal codes include letters and numbers. One time, he was filling out a form from the US. The form required him to input his zip code, but the validation method only allowed him to input five numeric characters. The result? He gave up because the form wouldn’t allow him to submit his information without a US-formated zip code.
In the end, accessibility can truly benefit us all. I invite you to think about some of the things I mentioned in this article and take a good look at how you can improve your contact forms so everyone can benefit from them, including yourself.
What do you think? Was this post helpful? Let me know
Like always, until next time,
Danny Bribiesca