Forms
Forms
Topic | Technique | WCAG AA Requirement | |
---|---|---|---|
Form inputs |
Programmatic Labels:Labels MUST be programmatically associated with their corresponding elements. Group Related Form 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. Descriptive Headings:Headings MUST be accurate and informative. Consistent Identification: Required Form Fields:Required fields SHOULD be programmatically designated as such. |
Required WCAG 1.3.1 WCAG 2.4.6 WCAG 2.5.1 WCAG 3.2.4 WCAG 3.3.2 WCAG 4.1.2 |
|
Form Errors and Instruction |
Error Identification:Error feedback SHOULD be made available immediately after form submission (or after an equivalent event if there is no form submission event). InstructionsInstructions for groups or sections SHOULD be programmatically associated with the group. Error Suggestion Error Prevention |
Required WCAG 3.3.1 WCAG 3.3.2 WCAG 3.3.3 WCAG 3.3.4 |
|
Labels for Inputs | Programmatic Labels: Labels MUST be programmatically associated with their corresponding elements. | WCAG 1.3.1 | |
Discernible Text: Labels MUST be available as programmatically discernible text. | WCAG 1.3.1 | ||
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 visual labels (without visual text) if the meaning of the icon is visually self-evident AND if there is a programmatically associated semantic label available to assistive technologies. | WCAG 1.3.1 | ||
Placeholder Text: Placeholder text MUST NOT be used as the only method of providing a label for a text input. | |||
Visible Labels: Labels MUST be visible. | |||
Visually Adjacent Labels: A label SHOULD be visually adjacent to its corresponding element. | |||
Programmatically Adjacent Labels: A label SHOULD be adjacent in the DOM to its corresponding element. | |||
Multiple Labels: When multiple labels are used for one element, each label MUST be programmatically associated with the corresponding element. | WCAG 1.3.1 | ||
Multiple Inputs: When one label is used for multiple elements, the label MUST be programmatically associated with each of the corresponding elements. | WCAG 1.3.1 | ||
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. | WCAG 1.3.1 | |
Radio Groups: Groups of Radio Buttons MUST have a group label in addition to the individual input labels. | WCAG 1.3.1 | ||
Discernible Text in Group Labels: Group labels MUST contain programmatically discernible text. | WCAG 1.3.1 | ||
Meaningful Group Labels: Group labels MUST be meaningful. | |||
Sensory Dependencies of Group Labels: Group labels MUST NOT rely solely on references to sensory characteristics. | |||
Visually Adjacent Group Labels: Group labels SHOULD be visually adjacent to the grouped elements. | |||
Programmatically Adjacent Group Labels: Group labels SHOULD be adjacent in the DOM to the grouped elements. | |||
Visible Group Labels: Group labels MUST be visible. | |||
Instructions for 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. | |||
Visually Adjacent Input Instructions: Instructions for an element SHOULD be visually adjacent to the element. | |||
Programmatically Adjacent Input Instructions: Instructions for an element SHOULD be adjacent in the DOM to the element. | |||
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. | |||
Instructions for an Entire Form, for Groups, or for Sections | 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. | |||
Visually Adjacent Group Instructions: Instructions for groups or sections SHOULD be visually adjacent to the grouped elements. | |||
Programmatically Adjacent Group Instructions: Instructions for groups or sections SHOULD be adjacent in the DOM to the grouped elements. | |||
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. | |||
Error Prevention | |||
Required Fields | Programmatic Designation: Required fields SHOULD be programmatically designated as such. | ||
Visual Indicator: Required fields SHOULD have a visual indicator that the field is required. | |||
Visible Group Instructions: | |||
Disabled Fields | |||
Form Validation and Error Handling | |||
Identify Required Fields on Validation: The form validation process MUST include an error message explaining that a field is required if the field isn't identified as required both visually and programmatically in the form's initial state. | |||
Success/Confirmation Messages | |||
Dynamic Forms | |||
Keyboard Focus Management During Interactions | Set Keyboard Focus: The focus MUST be purposely moved or set (via JavaScript) onto the appropriate element when the user's action requires a change of context or location for effective keyboard or touch interaction. | WCAG 2.4.3 | |
No Lost Focus: The focus MUST NOT become lost or reset to the top of the page, except when loading or re-loading a page. | WCAG 2.4.3 | ||
Focus Target Has Text: When moving or setting focus, the destination element MUST contain discernible text (either standard text or programmatically associated text). | WCAG 1.3.1 | ||
Custom Form Inputs (JavaScript/ARIA) | See the requirements for Custom Widgets (JavaScript/ARIA) | multiple |