Centers for Medicare & Medicaid Services
Defining consistent and accessible error validation across web products.
Role
Senior UX Designer
Timeline
03/24 - Present
Background
As the sole designer on the team, I work closely with product, engineering, and stakeholders to maintain and mature the CMS design system: a set of open-source design and front-end development resources for creating accessible, responsive, consistent websites across federal healthcare products.
Deliverables
Guidance for ‘Instant Validation’ and ‘Validation on Submit’ error styles, including use cases, content criteria, and accessibility standards
Figma patterns, including Error Summary component, form fields, inline errors, and final ‘Submit’ button
See it live:
Discovering user needs
We audited existing use of error validation styles across products and use cases and feedback on error states in usability testing. This information was used to form affinity maps identifying opportunites for improvement.
Key Insights
Both ‘Instant Validation’ and ‘Validation on Submit’ are used frequently and somewhat interchangeably.
Teams generally did not have guidance in choosing the appropriate error validation style for different use cases.
Overuse or misuse of instant validation was found to be frustrating and confusing in usability testing.
Accessibility standards are unclear and inconsistent across products.
Some instances relied heavily on color alone to indicate an error.
There were unclear standards for color contrast on different backgrounds.
Insufficient considerations were provided for screen readers and low visibility users.
Use of non-specific messages and unlinked summaries not specifically correlated to the incorrect field.
Many error messages did not clearly communicate the problem and used vague or generic language.
Unlinked error summaries did not provide specific steps to solve the error.
Finding 1: Both ‘Instant Validation’ and ‘Validation on Submit’ are used frequently and somewhat interchangeably.
Solution 1: Validation on Submit recommended as the default for most use cases.
I created guidance, use cases, and Figma patterns for consistent use of both Validation on Submit and Instant Validation error styles.
Instant Validation proved to be frustrating for users and had accessibility concerns, so we chose to recommend Validation on Submit as the default error validation style, except for specific use cases indicated for product teams.
Appropriate use for Instant Validation was limited to complex, short forms such as password and username creation. I also informed of potential drawbacks in use, like user confusion and frustration, inconsistent UI, etc.
Finding 2: Accessibility standards are unclear and inconsistent across products.
Solution 2: Accessibility considerations were baked into the provided resources alongside guidance for best practices.
Criteria in provided guidance includes:
Clear and consistent error messaging for both inline errors and error summaries.
Error summaries with anchor links to each corresponding error field.
Aria attributes and appropriate screen reader considerations for dynamic content changes.
Icons alongside error alert text, so as to not rely solely on color.
Discouraged use of disabled buttons, instead allowing a user to submit an incomplete form — the incomplete inputs will be included as part of the returned error messaging.
Recommended capacity for forced colors mode for optimum accessibility.
Recommended testing to validate understanding of what went wrong and how to fix it.
Finding 2: Use of non-specific messages and unlinked summaries not specifically correlated to the incorrect field.
Solution 3: Content framework defined for clear, consistent error messages.
Details and styles were defined for each piece of the pattern to create messaging that will consistently help the user solve the problem or continue to the next step, while using clear and concise language.
Impact
Clarified guidance and improved support to product teams by identifying existing problems and expanding resources.
Expanded Figma resources, including a new Error Summary component and a ‘Validation on Submit’ form pattern.
Defined standards for consistent and inclusive form experiences across CMS products by providing systemized accessibility, content, and interaction standards.
