Tips for Making Accessible and Responsive Forms

In today’s busy world, website users’ time is limited. For us to help them work with us quickly and efficiently, we need to ensure that our website forms are accessible and responsive. Here are some tips for making accessible and responsive forms:

1. Logical and easy to use. Make sure your forms are set up in a logical tab order and provide clear instructions. Also, use plain language for form instructions. If you don’t really need to know the answer to a question to process the form, don’t ask it!
2. Keyboard accessible. Form controls need to be accessible without a mouse, as some users only use a keyboard. Also, make sure that any fancy JavaScript such as a pop-up calendar also provides an alternative such as drop-down boxes for completing the fields.
3. Required fields clearly indicated. Red is a color that causes pause, but color should not be the only thing used to convey meaning, as not everyone can see the color red. Include other indicators such as asterisks, bold text, etc.
4. Group and label items. You should have labels that clearly describe what you are asking the user to complete. Use the HTML tags <fieldset> and <legend> to group and relate items.
5. ARIA attributes. Accessible Rich Internet Applications (ARIA) is a set of accessibility attributes that you can use with your HTML. Use the native HTML element or attributes if available, and supplement with ARIA attributes.
6. Stack the form on smaller screens. By using responsive design techniques or frameworks, you can ensure that your form is laid out in one column on a smaller screen or multiple columns on a larger screen.
7. Place labels above the form field. By placing the labels above the form field, you are displaying a consistent look and feel for both large and small screens.
8. Leverage HTML 5 input types. HTML 5 allows you to specify a number, telephone (tel) and email address input type that will automatically launch the users’ number keyboard on a mobile device.
9. Break lengthy forms into multiple pages. Instead of having a long scrolling form, break your form up into multiple pages. Include a progress bar so the user feels like they are making progress and know how soon they will be done.
10. Size matters on touch screens. Make your form field height a minimum of 2 em/24 px to ensure they are compatible with touch screens.

Leslie Labrecque is part of the GovLoop Featured Contributor program, where we feature articles by government voices from all across the country (and world!). See more Featured Contributor posts

You can follow Leslie on Twitter.