Designing Web Forms For Usability And Accessibility: A Complete Guide (Including Code)

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Poorly designed and implemented forms can create usability challenges for any web user, and present a particularly difficult challenge for visitors using assistive technologies. Form developers and designers should keep the needs of website visitors, especially those using assistive technologies, in mind as they design and code forms to ensure that all website visitors are able to make complete use of all website features.

In this guide to accessible forms, we will cover three of the guiding principles that will help you create usable and accessible web forms.

Make Forms Intuitive and Simple

As you design forms, make them as simple and as easy to use as possible.

Make it clear which fields are required in a plain and obvious manner. Don’t depend on the use colors, animations, or browser validation to convey this information. Visitors using assistive technologies may not be able to see animations and colors, and waiting for browser validation to clue in website visitors is a good way to frustrate your website visitors.

Group related fields together. For example, name, address, and contact information should typically appear together. Apply similar logic when grouping together the elements that are required for your form.

Follow common conventions when creating web forms. It is customary for the text label to be placed to the left or above an input field for text, number, and date fields. However, the opposite is true for radio buttons and checkboxes which should appear on the left with their text labels on the right-hand side.

Make Forms Keyboard Accessible

Not all website visitors use a mouse. Make sure your forms are navigable using just a keyboard. Make proper use of the value, tabindex, and accesskey attributes to ensure your form is easy to work with when using just a keyboard.

Using the Value Attribute Correctly

The value attribute can be used to prefill text fields. Sometimes form designers will add field instructions with the value attribute. However, this is a misuse of this attribute and can lead to usability issues since the value will have to be manually deleted out of the field prior to entering a new value. In addition, if the designer is relying on the value in the field to convey instructions and the visitor doesn’t fill in the field immediately after deleting the instructions they may forget them and be forced to reload the page.

Take this field for example:

Not only is it a hassle to work with, but if you happened to get distracted between deleting the instructions and entering a response you would be likely to forget the instructions.

It’s better to provide instructions separately from the field and then associated the instructions with the field using the label element discussed a little later in this article.

When is it appropriate to use the value attribute with a text field? Only when a significant majority of users will use the supplied value. However, if the overwhelming majority will use the value attribute, consider removing the field entirely or hiding it and having it submit behind-the-scenes.

The example below demonstrates the correct way to use the value attribute with a text field. However, it might be better to add the hidden attribute to this input rather than prefilling the field with the value attribute.

<!--Trivial example of an acceptable use of value-->
<label for="like_to_eat">Do you like to eat? </label>
<input type="text" name="like_to_eat" value="Yes">
<!--However, this way might be better-->
<input type="text" name="like_to_eat" value="Yes" hidden>

If we render those fields in the browser we can see the first is shown but the second is not. When this form is submitted the second response will be submitted in the background without the form user ever seeing the hidden field.

When might you use this technique? One situation that comes to mind would be a case where you have forms located at several different landing page designs you are trying out. In this case, submitting something like this with each form would help you keep the entries separated <input type="text" name="landing_page" value="page_1">.

Setting the Tab Index

Keyboard users typically navigate from one element to the next using the Tab key. You can control the sequence of elements selected by repeatedly pressing Tab with the tabindex attribute.

The attribute can be applied to any HTML element. When designing a form, you can use the attribute to move the cursor from one form element to the next in a logical manner, making it as easy as possible to complete the form.

<label for="likes_ice_cream">Do you like ice cream? </label>
<input type="text" name="likes_ice_cream" tabindex="1"><br>
<label for="favorite_flavor">What's your favorite flavor? </label>
<input type="text" name="favorite_flavor" tabindex="2"><br>
<label for="buy_ice_cream">Where do you buy ice cream? </label>
<input type="text" name="buy_ice_cream" tabindex="3">

When we render those three elements, we can easily tab through fields in the proper order.



Setting Up Custom Shortcuts

While there is broad agreement among web developers and accessibility experts about the value of implementing the tabindex attribute, there is not the same kind of agreement surrounding the accesskey attribute. It was originally envisioned as a way to provide quick access to key fields by creating custom shortcuts to specific elements. However, implementation of the attribute has suffered from a lack of consistency from one website to the next and conflicts with browser shortcuts can also occur. As a result, many experts today recommend against the use of the accesskey attribute.

If you do want to use accesskey, use it sparingly and try to find a key combination that won’t conflict with a combination already in use in any of the major browsers.

Label all Form Fields

One of the most effective ways to make your forms accessible is to associate a label with each form field. This is quite easy to do, as a matter of fact, we already demonstrated the proper technique in our ice cream questionnaire example above.

The first step is to apply a name attribute to the form element that the label will apply to. Next, create a short description of the content that should be entered into the field and wrap it in label tags. Finally, add the for attribute to the opening label tag and apply a value that matches the name applied to the associated form field.

Another way to give clues to form users is to group related form fields in a fieldset and apply a descriptive legend. For example, if the three questions above were part of a larger survey about food preferences, we could wrap those three questions in a fieldset and apply a legend like this:

<fieldset>
  <legend>Ice Cream Preferences and Practices</legend>
  <label for="likes_ice_cream">Do you like ice cream? </label>
  <input type="text" name="likes_ice_cream" tabindex="1"><br>
  <label for="favorite_flavor">What's your favorite flavor? </label>
  <input type="text" name="favorite_flavor" tabindex="2"><br>
  <label for="buy_ice_cream">Where do you buy ice cream? </label>
  <input type="text" name="buy_ice_cream" tabindex="3">
</fieldset>

Now when we render those fields in the browser the entire block of questions is clearly a set of related questions that all fall under the topic described by the legend.

Ice Cream Preferences and Practices




Next Steps & Additional Resources

Ensuring that your web forms are usable and accessible is critical if you hope to have a lot of visitors interact with your forms with a minimum of difficulty. Following the guidelines in this brief tutorial will help you sidestep the most common causes of usability and accessibility issues.

To learn more about creating accessible forms, refer to the following resources:

Jon is a freelance writer, travel enthusiast, husband and father. He writes about web technologies such as WordPress, HTML, and CSS.