Summary

Ensure that forms are understandable and controllable without relying on visual presentation.

Techniques

• Label and provide instructions on how to use form controls. [[WCAG-3.3.2]]

• Group sets of related controls, such as checkboxes and radio buttons. [[WCAG-1.3.1]]

• Identify required form fields. [[WCAG-3.3.2]]

• Identify and explain form input errors.

Explanation

One of the biggest impediments to using forms effectively is understanding and navigating their layout. To assist users, always clearly label form controls using the label element:

<label id="label" for="fname">First name:</label>

<input type="text"
      id="fname"
      name="first-name"/>

The for attribute is used to explicitly tie the label to its control. This attribute should be included even if the label also contain its control:

<label id="label" for="q1a">
   <input type="radio"
        id="q1a"
        name="q1-answer"/> a. Apples
</label>

When including additional instructions — for example, text limits or character restrictions — try to include these within the label so that the information is immediately available to the user. When this is not possible, attach an aria-describedby attribute to the control identifying the element containing the additional instructions:

<label for="uname">User name:</label>

<input type="text"
      id="uname"
      name="username"
      aria-describedby="req" />

<span id="req">
   User names must be between 8 and 16 characters in 
   length and contain only alphanumeric characters.
</span>

The HTML5 required attribute should always be attached to required fields so users using assistive technologies can be made aware in the absence of visual cues:

<input type="text"
      id="uname"
      name="username"
      aria-describedby="req"
      required="required"
      aria-required="true"/>

Validation

When a form contains invalid data that needs to be corrected by the user, attach the aria-invalid attribute to each field so that assistive technologies can quickly identify the fields and move the user to them:

if (country.value == 'US' && zip.value = '') {
   zip.setAttribute('aria-invalid', true);
}

else {
   zip.setAttribute('aria-invalid', false);
}

Do not attach the aria-valid to any form element by default. Until the user submits a form, the fields in it are neither valid nor invalid.

To improve the experience for all users, consider using the new HTML5 pattern attribute on form fields that can be validated by simple regular expressions. The user will be alerted immediately of problems instead of having to wait until submission. The title attribute should also be attached whenever using pattern validation to explain the requirement. A username field could restrict the number and type of characters as follows:

<input type="text"
      id="uname"
      name="username"
      aria-labelledby="username-label"
      pattern="[A-Za-z0-9]{8,16}"
      title="User names must be 8 to 16 alphanumeric characters"
      required="required"
      aria-required="true" />

Related Links

• MDN — <form>
• HTML — Forms