Accessible Forms

Form Instructions

Accessible forms have clear instructions that are preferably positioned near the top of the form, before the form’s input fields. Examples include explaining how required fields are represented visually in the form. Required fields must be indicated visually in a way that does not depend on color perception, and must be indicated programmatically for assistive technologies that need to describe such constraints to users.

Field formatting requirements must also be included, preferably as part of a field label to ensure that assistive technology will describe the necessary formatting. Using placeholder text may be acceptable, but includes some distinct disadvantages:

1. Assistive technology may not always describe the placeholder value, particularly when there is already input entered into the field.
2. Placeholder values typically include low contrast colors and are particularly difficult for low vision or color blind users to perceive. When contrast is increased, users are more likely to mistake placeholder values for real form input.

For the reasons listed above, we recommend reserving placeholder values specifically for examples of valid field input.

If additional information is needed to understand or complete a form field, display this information in context of the form field, rather than as a separate document. Finding “buried” information can be confusing for some users and may lead to higher form error rate.

Hidden, Read-Only, & Disabled Form Controls

All disabled form controls are explicitly exempt from the minimum contrast guidelines set in WCAG 2.2. The low contrast colors are likely to be difficult for low vision and color blind users to perceive the values of the disabled control.

Disabling Buttons that submit a form to block the submission of invalid data carries a risk of blocking users from submitting the form if they cannot understand what is missing or needs to be corrected. For this reason, we do not recommend disabled form submit buttons.

• Showing controls on a “need to know” basis, that is, hiding form controls that users do not have the required permissions to access, can reduce the complexity of the page and reduce cognitive load.
• Setting a control to read-only or replacing it entirely with static text is preferable to disabled controls because of the higher contrast when users need to view information about a control and don’t have the required permissions to modify it.
• Provide an explanation for why the field is disabled and how to proceed when a field is temporarily unavailable or requires action from users to change the disabled status.
• All disabled form controls are removed from the keyboard focus order of the screen. While this is standard behavior according to HTML specification, it is not true that screen reader users won’t be able to access disabled input. All screen readers are capable of detecting disabled form controls even if the controls cannot be focused with the keyboard.

Keyboard Accessibility

Pointing devices, like a mouse or trackpad, are not universally accessible devices. Why? A pointing device requires some functional eyesight to perceive the on-screen pointer, and fine motor control to precisely move the pointer. An accessible form is a form that can be completed accurately using a variety of alternative input devices including a keyboard, a custom switch control, and even by interpreting users voice commands.

For more information about various input devices, refer to Alternate Input Devices.

For more information about keyboard interactions, please refer to the Accessibility Guidelines section for each individual component.

Label Placement

Labels describe the purpose or function of a form control such as a Text Input or Checkbox. Labels for most form controls must be positioned to the left or directly above the form control; Radio Button and Checkbox labels must be positioned to the right of the control. The aim should be to maintain a close and distinct visual relationship between the label and the form control.

Placing labels above the form controls help reduce horizontal scrolling for people with low vision and mobile device users.

Grouping Fields

Grouping fields together isn’t always necessary or recommended. While designing an accessible form, examine where it is necessary to use repeated sets of identical input fields that need a little extra context to describe the purpose of each group. For example:

• Using 3 Text Input fields to capture the month, day, and year values of a “start date” and “end date”
• Using 2 Text Input fields to capture the time of day
• A form capturing both a billing address and a shipping address

Multi-Step Forms / Wizards

Wherever possible, forms must be divided into multiple small sections of related inputs. This helps make long forms less daunting and easier to understand, particularly for people who are less experienced using computers or who have various cognitive disabilities.

• Each section of the multi-step form should have 5-10 form controls at most.
• Form level instructions must be repeated at the beginning of every section.
• Multi-step forms must include a progress bar, step count, or percent complete indicator so users can understand their progress through the task.
• Optional form controls or groups of controls must be clearly communicated. Optional sections must have a mechanism to skip the page.
• If possible, don’t set a time limit to fill out the form. If a time limit is required, users must be able to adjust or extend the time limit.

Redundant Data Entry

Information that the user has previously entered must be made available to them, so that users are not entering repetitive information. Previously entered information can be made available through a select dropdown, or by allowing users to copy-paste or by auto-populating inputs with previously entered values.

The intent of which is to reduce the cognitive impact to users when information is asked for repeatedly in multi-step process flows. Allowing browsers to auto-fill commonly entered information, such as names and addresses, can also help reduce the cognitive load and effort on users.

Examples include ecommerce sites that give users a checkbox to specify that the billing address is going to be identical to the shipping address.