Challenge 1: Fix a Color-Only Status Indicator — Possible Solution ==================================================================== Healthy /* Optionally, for icon-based reinforcement instead of/alongside text: */ .status-healthy .status-dot::before { content: "✓"; } .status-down .status-dot::before { content: "✕"; } WHY THIS WORKS -------------- - The word "Healthy" (or "Down" for the failure state) is added as real, visible TEXT alongside the colored dot — this is a direct application of the chapter's core rule: any information conveyed via color must also be conveyed through at least one other channel. Now a color-blind user (or anyone who simply can't distinguish the specific red/green shades used) can read the actual status directly, rather than needing to correctly perceive the dot's color. - aria-hidden="true" is added to the decorative dot itself — since the REAL information is now carried by the visible text ("Healthy"), the dot becomes purely decorative reinforcement rather than the sole carrier of meaning. Hiding it from the accessibility tree prevents a screen reader from announcing something meaningless like "graphic" in addition to the text that already says everything needed. - The optional icon addition (a checkmark vs an X, via CSS content) provides a THIRD reinforcing channel beyond color and text — visual shape recognition — which can be genuinely helpful at a glance even for sighted users who might not want to read text for every single status indicator on a busy dashboard, while the text remains the authoritative, always-present source of the actual information. - This mirrors the chapter's own comparison box directly: "a green dot AND the word 'Online'" — the fix here is structurally identical, applied to a healthy/down status instead of an online/offline one.