Advanced Stuff...

1. Validation or Error handling and error messages

Error messages that just say "there is an error on your form", but, do not give any guidance as to what is wrong. For example, an error message like "date is incorrect" or "phone number is incorrect" do not provide guidance.

• "The sole purpose of form validation is to help the user" - Form.Guide
• Use Patterns to check validity
• Alert the user of any validation errors in an apparent and accessible manner.
  • Page Title (mention form errors)
  • Heading (mention form errors)
  • Don't use COLOR alone to indicate error.
  • Place error messages in close proximity to form control. (Inside <label> is a good place)
• Provide informative feedback messages (what's wrong, how to fix it).
• Allow the user to easily access the form elements that need to be modified.
  • link to elements in error
  • show only elements in error
• Allow resubmission and revalidation of the form information. (Thanks to WebAIM)
• Avoid Default Field Validation - use "novalidate or formnovalidate" attributes

Some Examples

• Avoid Default Field Validation
• Form Errors Screen Readers Can Access
• HTML5 Form Validation Plugin For Bootstrap Bootstrap Validator
• HTML5 Form Validation
• Access & Use: Form Error Handling
• Accessible Form Labeling & Instructions
• Forms: User Notifications - W3 Accessibility Tutorials
• A Definitive Guide to Sensible Form Validation
• Simple inline error message pattern
• Using Accessible Methods of Form Validation
• Displaying multiple errors on a form
  • Error Messaging with skip links
• Sample Form Demonstrating Accessible Form Validation
• How to Provide Accessible Error Identification
• An Example from Standards Schmandards
• Accessible Context-sensitive Help with Unobtrusive DOM Scripting Part 1
• Accessible Context-sensitive Help with Unobtrusive DOM Scripting Part 2
• WebAim Widgit Accessibility
• Usable and Accessible Form Validation and Error Recovery
• 4 rules for displaying error messages from a user experience perspective
• Error feedback using live regions
• Accessible Client-side Form Validation with HTML5 & WAI-ARIA
• Form validation best practices
• Form Validation UX in HTML and CSS
• GOV.UK design patterns for Errors and Validation
• MDN-Form Validation
• Constraint Validation: Native Client Side Validation for Web Forms
• Enhancing a login form

The Form

The HTML

2. Form Instructions and Intervening Text