Design Principle
State changes conveyed only by color, toast, or visual movement can be missed by some users.
Principle
State changes conveyed only by color, toast, or visual movement can be missed by some users.
Design action
Provide visible text for key state changes; use semantic live regions where needed, naming the object, state, and next step.
Examples
Positive example: Search suggestions, save states, generation progress, form validation, and filter results change without page refresh. Counterexample: Result count changes without text feedback.
Apply when
Search suggestions, save states, generation progress, form validation, and filter results change without page refresh. Users need to judge state, scope, risk, or next action quickly.
Source notes
Source note: Synthesized from W3C WCAG 2.2, Apple Accessibility, IBM Carbon Accessibility, and accessibility practices in major design systems. WCAG 2.2: https://www.w3.org/TR/WCAG22/ WCAG Contrast Minimum: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html WCAG Non-text Contrast: https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html Apple HIG Accessibility: https://developer.apple.com/design/human-interface-guidelines/accessibility Carbon Accessibility Overview: https://carbondesignsystem.com/guidelines/accessibility/overview/
Agent Directive
Provide visible text for key state changes; use semantic live regions where needed, naming the object, state, and next step.