Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UX
Webdesign

6 Tips for Accessibility in Form Design

by
Length:ShortLanguages:

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. 

First nName rises to the top of the field on input focus Warbyparkercom
First name rises to the top of the field on input focus warbyparker.com

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. 

Bad example
Bad checkbox states example

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. 

Enter your address with text area
Good example of entering your address with a text area

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.