Creating accessible assets: Forms

Forms are a key part of user interaction on landing pages and websites, whether for signing up, making purchases, or submitting information. To ensure everyone can use them, forms must be designed with accessibility in mind. This article covers best practices for labeling fields, providing clear instructions, managing errors, and supporting keyboard navigation, so all users can complete your forms with ease.

Requirements

• All labels must be programmatically associated with their corresponding elements.
• All labels must be available as programmatically discernible text.
• All labels must be meaningful.
• Placeholder text is allowed but must not be used as the only method of providing a label for a text input.
• When multiple labels are used for one element, each label must be programmatically associated with the corresponding element.
• When one label is used for multiple elements, the label must be programmatically associated with each of the corresponding elements.
• Group labels must be programmatically associated with the group if the individual labels for each element in the group are insufficient on their own (e.g. a group of radio buttons that has a group label plus individual labels for each radio option).
• Instructions for understanding and operating content must not rely solely on sensory characteristics of components such as:
  • shape,
  • color,
  • size,
  • visual location,
  • orientation,
  • sound.
• Icons or graphics may be used as the only visual label (without visual text) only if the icon’s meaning is visually self-evident and there is a programmatically associated semantic label available to assistive technologies.
• Labels must be visible.
• Instructions for an element must be programmatically associated with the element.
• Instructions for an element must be available as programmatically determinable text.
• Instructions for an element must be meaningful.
• Visible Input Instructions: Instructions for an element must be visible.
• For user interface components with labels that include text or images of text, the name must contain the text that is presented visually.
• The programmatic label must include the same text presented in the visual label, to facilitate voice activation.
• If awareness of a disabled field is essential to understanding the content, an alternative way of communicating information about the disabled field must be provided.
• This is because disabled fields are not in the normal tab order by default, making it difficult for screen reader users to discover them.
• Users MUST be allowed sufficient time to complete the form, through at least one of the following methods:
  • no time limit,
  • the ability to turn off the time limit,
  • the ability to extend the time limit,
  • the ability to adjust/customize time limit,
  • a minimum of 20 hours to complete the form.
• Information previously entered by or provided to the user that is required to be entered again in the same process is either:
  • auto-populated, or
  • available for the user to select.
• Except when:
  • re-entering the information is essential,
  • the information is required to ensure the security of the content,
  • or previously entered information is no longer valid.
• A cognitive function test (such as remembering a password or solving a puzzle) must not be required for any step in an authentication process.
  • “Object recognition” and “Personal content” may be represented by images, video, or audio.

Exceptions

Entering redundant information

Exceptions are allowed when:

• re-entering the information is essential,
• the information is required to ensure the security of the content,
• or the previously entered information is no longer valid.

Authentication

A cognitive function test (such as remembering a password or solving a puzzle) MUST NOT be required for any step in an authentication process unless that step provides at least one of the following:

• Another authentication method that does not rely on a cognitive function test.
• A mechanism is available to assist the user in completing the cognitive function test.
• The cognitive function test is to recognize objects.
• The cognitive function test is to identify non-text content the user provided to the website.

Examples

	DO: A form contains several required fields. The labels for the required fields are displayed in red. At the end of each label is an asterisk character, *. DO: Fields have supporting icons to represent input state e.g. lock. DO: All input states are easily recognizable.
	Mechanisms that satisfy criterion 3.3.8 include: support for password entry by password managers to reduce memory need, copy and paste to reduce the cognitive burden of re-typing.