Form Input, 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
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
Discernible Text in Group Labels: Group labels MUST contain programmatically-discernible text.
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)
Meaningful Group Labels: Group labels MUST be meaningful.
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
Sensory Dependencies of Group Labels: Group labels MUST NOT rely solely on references to sensory characteristics.
Once 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
Visible Group Labels: Group labels MUST be visible.
Visually Adjacent Labels: A label SHOULD be visually adjacent to its corresponding element.
best practice
Matching Programmatic Label and Visual Label: The programmatic label MUST include the same text presented in the visual label, to facilitate voice activation.
Programmatically Adjacent Labels: A label SHOULD be adjacent in the DOM to its corresponding element.
best practice
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
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
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
Custom Form Inputs (JavaScript/ARIA)
See the requirements for Custom Widgets (JavaScript/ARIA)
Required multiple
Last updated
Was this helpful?