Forms are a really important part of the web experience. They catalog requests, complete purchases, assist signup flows, and play a crucial role in your business’ key metrics. Here are some best practice tips and examples to ensure your forms are usable, logical and effective for a wide range of users.
1. Test the Tool!
One of the best ways to understand the limitations of your design is to test it. While you might not have access to every existing assistive technology on the market, there are plenty of browser extensions and free software you can use to simulate accessibility scenarios. They might help you, for example, navigate with a screen reader; a tool that navigates a page through heading structure and link text. You might also check out videos of screen readers in action, to get an impression of how they might handle your forms.
Some popular examples of screen readers include: JAWS from Freedom Scientific, Window-Eyes from GW Micro, and Dolphin Supernova by Dolphin.
2. Clearly State the Information Needed
One issue that users with disabilities encounter is a barrier to understanding what information or input is required. Be sure to clearly indicate what is needed. If something is optional, make it known with a label.
3. Visually Group Related Elements
Multiple options for a given category on any form can be grouped. A form’s label should not only pass visual contrast tests, but should also be within close proximity of the form field (so that they are visually associated with one another, according to Gestalt’s principles).
Also consider the fact that placeholder text within a form field can create challenges for people to remember what information belongs in that field, and to fix mistakes. Once a form field is in focus, the placeholder text disappears, so make sure it isn’t of primary importance.
4. Be Specific When Indicating State
Besides accessibility, it’s best practice to clearly indicate states through your design. This can mean making error states local to the specific form element where the error exists, or as in the example below, using established checkbox states that are recognizable and differentiated.
5. Associate Meaningful Labels
It’s important to add labels to HTML markup that are specific and meaningful. Make sure your labels are descriptive enough that the user can take action on them alone, which may be the case if they are using a screen reader.
<label for="address">Enter your address:</label><br> <textarea id="address" name="addresstext"></textarea>
6. Trigger Submit From an Explicit Action
Action buttons like “Save” and “Submit” may trigger the next action in a flow such as confirmation or a page update. Having a separate action button helps to prevent navigation actions or even accidental clicks.
Conclusion
Bad forms can be tedious or annoying at best, and a serious barrier to conversion at worst. The best practice guidelines we listed here will help to optimize your form’s experience.
Learn More
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post
