Form Input, Labels, and Instructions

Accessibility Techniques for Form Inputs, Labels, and Instructions
Topic Technique WCAG AA Requirement
Labels for Inputs Programmatic Labels: Labels MUST be programmatically associated with their corresponding elements. Required
WCAG 1.3.1
Discernible Label Text: Labels MUST be available as programmatically-discernible text. Required
WCAG 1.3.1
Meaningful Labels: Labels MUST be meaningful. Required
WCAG 1.3.1
Sensory Dependencies of Labels: Labels MUST NOT rely solely on references to sensory characteristics. Required
WCAG 1.3.3
Icons as Labels: Icons/graphics MAY be used as the only visual label (without visual text) only if the meaning of the icon is visually self-evident AND if there is a programmatically associated semantic label available to assistive technologies. Required
WCAG 1.3.1
Placeholder Text: Placeholder text is allowed, but MUST NOT be used as the only method of providing a label for a text input. Required
WCAG 1.3.1
Visible Labels: Labels MUST be visible. Required
WCAG 3.3.2
Label in Name: For user interface components with labels that include text or images of text, the name MUST contain the text that is presented visually. Required
WCAG 2.5.3 (WCAG 2.1)
Matching Programmatic Label and Visual Label: The programmatic label MUST include the same text presented in the visual label, to facilitate voice activation. Required
WCAG 2.5.3
(WCAG 2.1)
Multiple Labels for One Input: When multiple labels are used for one element, each label MUST be programmatically associated with the corresponding element. Required
WCAG 1.3.1
One Label for Multiple Inputs: When one label is used for multiple elements, the label MUST be programmatically associated with each of the corresponding elements. Required
WCAG 1.3.1
Visually Adjacent Labels: A label SHOULD be visually adjacent to its corresponding element. best practice
Programmatically Adjacent Labels: A label SHOULD be adjacent in the DOM to its corresponding element. best practice
Labels for Groups of Inputs Programmatic Group Labels: 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). Required
WCAG 1.3.1
Discernible Text in Group Labels: Group labels MUST contain programmatically-discernible text. Required
WCAG 1.3.1
Meaningful Group Labels: Group labels MUST be meaningful. Required
WCAG 1.3.1
Sensory Dependencies of Group Labels: Group labels MUST NOT rely solely on references to sensory characteristics. Required
WCAG 1.3.3
Visible Group Labels: Group labels MUST be visible. Required
WCAG 3.3.2
Matching Programmatic Label and Visual Label: The programmatic label MUST include the same text presented in the visual label, to facilitate voice activation. Required
WCAG 2.5.3
(WCAG 2.1)
Visually Adjacent Group Labels: Group labels SHOULD be visually adjacent to the grouped elements. best practice
Programmatically Adjacent Group Labels: Group labels SHOULD be adjacent in the DOM to the grouped elements. best practice
Identify Input Purpose Identify Input Purpose: The purpose for each common input field that collects an individual's personal data MUST be programmatically defined based on the list of 53 Input Purposes for User Interface Components. Required
WCAG 1.3.5 (WCAG 2.1)
Instructions About Inputs Programmatic Association of Input Instructions: Instructions for an element MUST be programmatically-associated with the element. Required
WCAG 3.3.2
Programmatically-Discernible Text in Input Instructions: Instructions for an element MUST be available as programmatically-discernible text. Required
WCAG 3.3.2
Meaningful Input Instructions: Instructions for an element MUST be meaningful. Required
WCAG 3.3.2
Visible Input Instructions: Instructions for an element MUST be visible. Required
WCAG 3.3.2
Sensory Dependencies of Input Instructions: Instructions for an element MUST NOT rely solely on references to sensory characteristics. Required
WCAG 1.3.3
Hidden Input Instructions: If the instructions for an element are not critical, the instructions MAY be hidden until the user requests them. best practice
Visually Adjacent Input Instructions: Instructions for an element SHOULD be visually adjacent to the element. best practice
Programmatically Adjacent Input Instructions: Instructions for an element SHOULD be adjacent in the DOM to the element. best practice
Instructions About an Entire Form, a Group, or a Section Programmatic Association of Group Instructions: Instructions for groups or sections SHOULD be programmatically-associated with the group. Required
WCAG 3.3.2
Programmatically-Discernible Text in Group Instructions: Instructions for groups or sections MUST be programmatically-discernible. Required
WCAG 3.3.2
Meaningful Group Instructions: Instructions for groups or sections MUST be meaningful. Required
WCAG 3.3.2
Visible Group Instructions: Instructions for groups or sections MUST be visible. Required
WCAG 3.3.2
Sensory Dependencies of Group Instructions: Instructions for groups or sections MUST NOT rely solely on references to sensory characteristics. Required
WCAG 1.3.3
Hidden Form Instructions: If the instructions are not critical to understand the purpose of a group or section, the instructions MAY be hidden until the user requests them. best practice
Visually Adjacent Group Instructions: Instructions for groups or sections SHOULD be visually adjacent to the grouped elements. best practice
Programmatically-Adjacent Group Instructions: Instructions for groups or sections SHOULD be adjacent in the DOM to the grouped elements. best practice
Required Fields

Programmatic Designation: Required fields SHOULD be programmatically designated as such.

Note: At a minimum, WCAG requires an informative error message about the field after the user submits the form.

best practice
Visual Indicator: Required fields SHOULD have a visual indicator that the field is required. best practice
Data Input Restrictions

Information About Data Input Restrictions: If a field allows only restricted input (e.g. a certain date format, only integers, no more than 4 characters, etc.), the restrictions SHOULD be communicated in the label or instructions.

Note: At a minimum, WCAG requires an informative error message about the field after the user submits the form.

best practice
Disabled Fields Awareness of disabled fields: 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 (because disabled fields are not in the normal tab order by default, making it difficult for screen reader users to discover them). Required
WCAG 1.3.1
Time Limits

Sufficient Time. 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

Note: This requirement can be waived if the time limit is essential to the meaning or purpose of the form (e.g. a timed auction).

Required
WCAG 2.2.1
Dynamic Forms See the requirements for Dynamic Content (JavaScript, AJAX) Required
multiple
Custom Form Inputs (JavaScript/ARIA) See the requirements for Custom Widgets (JavaScript/ARIA) Required
multiple