Table of Contents
Creating good forms is a tough job. By “good” I don’t mean just visually pleasant. Sure, this plays important role too. Who likes to fill in an ugly form? No, I am talking about creating forms that are both, nice to look at and also accessible. Today, we will put the visual part aside and focus solely on accessibility (well … ). We are going to look at various aspect we have to take care about to ensure the best usability and friendliness for users. Without further ado, let’s begin!
#1 – Use logic
First aspect we will discuss is keeping the form logic. This means planning out the structure of the form and its individual parts and fields so it all makes sense without the need to explain anything. If you have to provide additional information to describe what the form or certain field is supposed to be used for (this does not apply to placeholders and labels), you’ve already failed. Remember, if something needs manual or even professional assistance, there is a big problem with the form.
When designing a form, keep in mind to follow logical structure. For example, think about the forms you saw until now. Most of them use following order of fields – name, phone, email, message and finally the button. In HTML this form might look like this:
HTML:
<form id="form" action="post"> <div class="field"> <label for="name">Name: <label> <input id="name" type="text" name="name"> <div> <div class="field"> <label for="phone">Phone: <label> <input id="phone" type="tel" name="phone"> <div> <div class="field"> <label for="email">Email: <label> <input id="email" type="email" name="email"> <div> <div class="field"> <label for="message">Message: <label> <textarea id="message" name="message"></textarea> <div> <div class="field> <button type="submit">Submit</button> </div> <form>
Sure, number of fields will vary a lot, but the logic will remain. Keep in mind that by providing logical structure you are not only making it easier for user to understand what he is supposed to do, but you are also increasing your chances that the user will fill and submit the form at all. Be honest. How many times you refused to fill some form just because it looked too complicated and time-consuming?
#2 – Allow keyboard
Simply said, not every device has a mouse, so depending on it in the world of Internet might be equal to suicide. Let’s take a look at some numbers first. These statistics are related to USA, but with some modifications they can apply to other countries as well. About 58% of American adults own a smartphone. About 42% of American adults own tablet. About 32% of American adults own e-reader. About 31% of all organic search in the US is from mobile devices. In global, mobile users covers about 63% of population (smartphones are about 24% of them). I doubt that these numbers will decrease in the future, rather the opposite.
I hope that these numbers convinced you to at least consider implementing the ability to navigate through form via keyboard. For example, you can implement some script that will watch for key events so users can use arrow keys or tab key to “jump” between individual fields. This also includes including some effect so users can distinguish between the field that has focus and the rest of them. Apply focus state effect also on button because without mouse, you cannot rely on hover state.
#3 – Labels Vs Placeholders
It looks like one of the current trends to omit the labels in forms and rely on placeholders instead. However, before you will follow this idea you had better check the facts. Placeholder attribute is not supported in IE 8, 9 and Opera Mini. Even though these browsers cover about 7.5% all the whole market, all these users will be clueless in case of form without any labels. So, are you willing to forget all these users and left them to their destiny or will you offer them some other way?
This way can be very simple. All you need is to use a feature detection JavaScript library called Modernizr. With this included on your website you can detect the browsers without support for placeholders and display the labels. Otherwise, the labels will be hidden via CSS display property. Easy and quick fix that will take care about all the problems (except those with disabled JavaScript).
#4 – Use contrast
I know that I said in the beginning that we are not going to talk about visual part of this, but we have to make small exception here. The reason is that contrast is very important in design of … Well, anything. By using appropriate contrast we can make certain elements more visible and eye catching than others. When planning the layout of the website and position of form, always put it on place that is visible and will help the form stand out. Don’t rely only on colors and various shades. People can visit the website on devices like screen readers. These devices often don’t support any colors except black and white. So test it appropriately.
Another thing to think about are people with health disabilities like colorblindness or inability to see certain hues or shades. Good thing to do is, again, create strong contrast between the background and form, so the user can always distinguish where the fields are.
#5 – Language
Last thing you have to think about is language used in the form. Many of you are from English speaking countries, but not everyone and choosing the “right” language for the form can be crucial. In most cases, the best option is to stay with English or to at least include it as a secondary language – in parentheses or creating two forms in different languages. However, the issue of language doesn’t stop here. You also have to consider the style of language you will use (jargon, technical terms, abbreviations, etc.). When user will not understand the language the form is written in, he will not fill in required information and submit it. Good rule of thumb is to keep the language formal and human friendly. Keep the lol, np, btw, eta and other things for your friends on facebook.
Summary
Well designed forms are not only visually appealing to user, but also accessible. To ensure both of these parts work as they should, try to think like the potential visitor of the website. Make sure to plan and test all the topics we discussed above. I hope this suggestions will help you create friendly and functional forms on your website(s).
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
