WCAG Score - TBD
Provided by the component
Visual accessibility
Color alone is never enough to convey meaning. The component must adhere to the following principles:
1. Dual-Encoding of Status
- Requirement: Status must be conveyed by both color and the Status Icon.
- Rationale: This ensures users with color vision deficiency can still distinguish between Error (e.g., 'X' icon) and Warning (e.g., '!' icon) messages, even if they cannot perceive the difference between red and yellow/orange.
2. Contrast
- Requirement: All text in the Caption component must meet the WCAG 2.1 Level AA contrast ratio against its background (this includes both the Minimal and Highlighted styles).
- Rationale: Ensures legibility for users with low vision.
Non-Interactive Element
- Requirement: The component (including the Status Icon and Body Message) is primarily informational and must be non-interactive and not focusable, as it relies on the associated input field for context.
Implementation considerations
Developers must do the following in the implementation to be considered fully accessible:
1. Programmatic Field Linkage (ARIA)
- Requirement: The body message must be programmatically linked to the input field it describes using the aria-describedby attribute.
2. Contrast
- Requirement: All text in the Caption component must meet the WCAG 2.1 Level AA contrast ratio against its background (this includes both the Minimal and Highlighted styles).
- Rationale: Ensures legibility for users with low vision.