Form Input, Labels, and Instructions
Topic
Technique
WCAG AA Requirement
Labels for Inputs
Programmatic Labels: Labels MUST be programmatically associated with their corresponding elements.
Discernible Label Text: Labels MUST be available as programmatically-discernible text.
Meaningful Labels: Labels MUST be meaningful.
Sensory Dependencies of Labels: Labels MUST NOT rely solely on references to sensory characteristics.
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.
Placeholder Text: Placeholder text is allowed, but MUST NOT be used as the only method of providing a label for a text input.
Labels for Groups of Inputs
Visible Labels: Labels MUST be visible.
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.
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.
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.
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.
Programmatically-Discernible Text in Input Instructions: Instructions for an element MUST be available as programmatically-discernible text.
Meaningful Input Instructions: Instructions for an element MUST be meaningful.
Visible Input Instructions: Instructions for an element MUST be visible.
Sensory Dependencies of Input Instructions: Instructions for an element MUST NOT rely solely on references to sensory characteristics.
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.
Programmatically-Discernible Text in Group Instructions: Instructions for groups or sections MUST be programmatically-discernible.
Meaningful Group Instructions: Instructions for groups or sections MUST be meaningful.
Visible Group Instructions: Instructions for groups or sections MUST be visible.
Sensory Dependencies of Group Instructions: Instructions for groups or sections MUST NOT rely solely on references to sensory characteristics.
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).
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).
Dynamic Forms
Required multiple
Custom Form Inputs (JavaScript/ARIA)
Required multiple
Last updated
Was this helpful?