Accessible Digital Forms

In Top Form: Designing and Building Accessible Forms Training Video

Real world advice and techniques to ensure that all web forms transactions are accessible. Forms are one of the most common places where accessibility problems occur.

This virtual seminar reviews common problems in the design and accessibility of complex web forms and shows how to solve these issues and make websites more effective.

Designers and developers will learn strategies that help ensure that they're hitting the mark when it comes to error messages, corrections, and contextual help for form fields, keyboard interaction, and dealing with complex form types.

What to Keep in Mind While Creating Forms

Screen readers and/or keyboard-only input users will have issues if you do not take steps to ensure your forms are accessible. An accessible form is one that contains clearly labeled form fields and buttons. Ideally, those labels also appear on-screen so that information is available to all users. At a minimum, all form fields and buttons must have explicit labels, visually and in the code.

Clarity and Ease of Use Benefits

Elements of a form such as instructions, cues, required form fields, field formatting requirements, etc. should be clearly identified to users. The order of elements should be logical and accessible. Be mindful that using tables to control layout can be problematic with forms. Everyone benefits from a well-organized, usable form, especially those with cognitive impairments. 

Form-Building tools with built-in Accessibility 

An easy way to create an accessible form is to use a form-building tool that creates accessible markup automatically, instead of hand-coding forms. The USCF Drupal Starter Kit includes access to Drupal’s powerful Webform module, and the built-in contact form is already accessible.

Tab order is Essential for Screen Reader

Screen reader users generally navigate through a form using the Tab key to jump to the next element. The form label is read out loud for each form control when the user navigates to them. Any non-label text content between the form controls is usually skipped over.

Use the <label> Tag

Using the<label> tag will provide the explicit labels required for form fields. In order for the<label> tag to properly associate with the form field being described, the label tag must include a “for” attribute that exactly matches the “id” attribute in the form field. Doing so enables assistive technology, such as a screen reader, to communicate the information that a particular form field expects from the user when they fill in the form. Note: make sure the<label> tag appears in the code before the<input> tag, as in the example code below.

Use Placeholder Attributes

If you use placeholder text in your form fields, make sure that your placeholder attributes are not being used instead of label tags. While it’s acceptable to use them, they do not convey the required information to assistive technology and are therefore not an acceptable replacement for the<label> tag. For more information on placeholder attributes, see the WHATWG article in the Dive Deeper section below.

Advanced Techniques: Legends and Fieldsets

Complex forms can require additional work to ensure they are clearly organized. Using<fieldset> and<legend> tags can greatly improve the legibility and usability of forms by creating boundary lines around related fields and providing a visible title for the group.

Here is an example of how you would use <fieldset> and <legend> in your form:

<fieldset>
  <legend>Step One: Personal Information</legend>
  <label for=”name”>Name: </label>
  <input id=”email” type="text" size="20">

  <label for=”email”>Email: </label>
  <input id=”email” type="text" size="20">
</fieldset>

There are several ways to label a form field. For example, you may use the aria-label or title attribute, but the best way is to create an on-screen label. This is an example of what the HTML looks like for a text box requesting a name:

<label for=”name”>Name:</label>
<input id=”name” type=”text” name=”textfield”>