Validation Messaging Guide
Giving validation feedback is an emotional process. Support users with this process by following these guidelines:
- Explain what the Input expects before the user enters data. (Example: password rules, ranges, etc)
- Give clear and helpful feedback when encountering a problem.
- Use a combination of placement, timing, and language to guide users through moments of uncertainty.
- Place messaging close to the Input. Spark places validation directly under the Input.
- Provide a clear visual to indicate something has gone wrong with user Input and needs attention.
- Plan error messaging for every field.
- On forms with multiple fields, show validation messaging for each Input field to guide users to a successful submission.
- Show validation messaging after the user enters the data or when the Input becomes out of selection focus.
- On forms, show error messaging before the user submits the form.
Selection focus changes when a user taps or clicks anywhere outside of the current focused element. Focus can also change through keyboard navigation.
- Use labels and helper text to clarify what data the Input expects. Messaging should be related and relevant to the Input.
- Deliver direct and concise statement of the problem in non-technical terms. Write out abbreviations.
- Use sentence case. Do not use all caps.
- Direct users to the next action to solve the problem.
- Use positive action verbs, rather than negative ones. Focus on the solution by explaining what to do, opposed to what not to do.
- If the “error” is a system condition that blocks the user from accomplishing a task, offer them a way to be notified of updated system status.
- Follow accessibility guidelines, and where applicable, use aria-live regions.
Use error messaging to clarify any system errors and additional constraints to the user.
- Choose a T-shirt size. (Example: Radio Input, Dropdown)
- Choose at least one of the options. (Example: Checkbox)
- Enter your first name. (Example: Text Input)
- Enter an amount that is less than your current balance of $19,800. (Example: Monetary Input)
- Enter a date within the past 99 years. (Example: data Input constraint)
- Enter your 9-digit Social Security Number.
- Create a password that meets the following criteria:
- It has at least 8 characters.
- Contains a number.
- Contains a special character.
The guides are not all-inclusive in regard to accessibility considerations. Refer to the Web Content Accessibility Guidelines (WCAG 2.1, Level AA) for additional insights.