Form Validation and Feedback
Topic | Technique | WCAG AA Requirement |
---|---|---|
Labels and Instructions for Error Prevention | See the requirements and recommendations for Form Inputs, Labels, and Instructions, including:
|
Required multiple |
Context-Sensitive Help: Context-sensitive help SHOULD be available. | best practice | |
Critical Error Prevention | Web pages that process user input for any of the following:
MUST implement at least one of the following error prevention techniques:
|
Required WCAG 3.3.4 |
Error Prevention (All Circumstances) | All web pages that process user input SHOULD implement at least one of the following error prevention techniques:
|
best practice |
Error Detection on Submit | Error Identification: If an error is automatically detected, the input with the error MUST be identified. Valid techniques include the following:
|
Required WCAG 3.3.1 |
Dynamic Error Detection | Visible Real-Time Error Messages: Real-time error messages MAY be scripted to show on the screen for sighted users, but attempts to announce the real-time messages to screen reader users can be problematic (see the next two rows below). It is usually acceptable to wait to announce real-time errors until after form submission, assuming that no data has been saved yet. | best practice |
Live Announcements per Keystroke: ARIA live error messages SHOULD NOT be scripted to occur with every keystroke (to avoid overwhelming screen reader users), unless there is a delay built into the script to avoid announcements while the user is actively typing. | best practice | |
Live Announcements on Leaving a Field: ARIA live error messages SHOULD NOT be scripted to occur when a user leaves a field, because the aria-live announcement will may conflict with the screen reader's attempt to read the next element which receives focus, causing some information to be interrupted or not announced at all. | best practice | |
Error Message Characteristics | Error Suggestion: If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text. | Required WCAG 3.3.3 |
Programmatically Associated: Error feedback SHOULD be programmatically associated with the appropriate element. | best practice | |
Meaningful Error Message: Error feedback MUST clearly and accurately describe the error and/or how to fix the error. | best practice | |
Visible Error Message: Error feedback MUST be visible. | Required WCAG 3.3.3 |
|
Success Messages | Success Confirmation: The web page SHOULD confirm successful submission of data. Possible techniques include the following:
|
best practice |