WCAG 2.1 AA — release blocker
Web (React DOM)
- The card is a plain
<div>. The value and label render as separate<div>s, so they read in order: "6, Active Roles". - Wrap a row of StatCards in
<section aria-labelledby="…">if the stats belong to a labeled region (e.g. "Overview metrics" heading). - The icon tile is decorative — the icon SVG should be
aria-hiddenor the parent's label should cover the meaning.
React Native
- Renders
View+Text. Each text element gets its own accessibility focus, which screen readers read in DOM order. - For high-density dashboards, consider grouping with
accessibilityRole="summary"on the parent View.
Color is never the only signal
- Tone is decorative. The value and label text carry the meaning.
- For threshold callouts (danger / warning) pair the tone with an icon — never colour alone.
Audit checklist
- Value + label readable in DOM order.
- Decorative icon not exposed to assistive tech.
- Section-level heading when the cards belong to a named region.
- 4.5:1 contrast on the value text in every tone × light/dark.