Forms/Validation / error states - Identifying Errors

[jinky32]

Requirement: When submitting information using forms, any errors made by the user that are automatically detected should be identified on the web page, and the error described to the user in text.

Recommendations:

• You should list any error messages at the top of the form with a link to its associated field. This enables screen reader users to easily identify all the errors to be addressed in one location and makes navigating and correcting these errors easier. In addition, the field containing the error could be highlighted, a graphic asterisk and text message be placed next to the field to explain that it contains an error.
• Error messages can also be included in the ARIA (Accessible Rich Internet Applications) ‘describedby’ attribute.
• You should confirm to the user that the form has submitted correctly and that no further action is required.

WCAG Reference: This corresponds to WCAG 3.3. http://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error.html

[papafed]

As a not-incompatible point of usability and security, we should a) prevent users from making errors in the first place by using things like dropdowns where appropriate, preventing the submission of incomplete forms, etc, and b) shy away from overly prescriptive validation (such as for phone number or email addresses) and instead favour sanitising these inputs on the server side (so accept any phone number format with spaces, braces, hyphens etc, then convert it server-side to pure numbers, for example)