{
  "id": "F3/c02",
  "rulePrefix": "F3",
  "variant": "c02",
  "ruleType": "w3c-failure",
  "caseTitle": "Status conveyed only via CSS background sprites",
  "scanScope": "specimen",
  "synthetic": false,
  "status": "current",
  "title": "Failure of Success Criterion 1.1.1 due to conveying information exclusively using CSS background images (status sprites)",
  "summary": "conveying status information exclusively using CSS background images on empty elements",
  "whyItFails": "Screen reader users hear only “API gateway” and “Database” with no indication of up/down status because the meaning lives solely in background sprites on empty spans.",
  "principles": [
    "perceivable"
  ],
  "guidelines": [
    "1.1"
  ],
  "successCriteria": [
    {
      "id": "1.1.1",
      "name": "Non-text Content",
      "level": "A",
      "slug": "non-text-content"
    }
  ],
  "versions": [
    "2.0",
    "2.1",
    "2.2"
  ],
  "automatable": "partial",
  "requires": [
    "html",
    "css",
    "media"
  ],
  "isolated": true,
  "pairWith": [],
  "w3c": {
    "understanding": [
      "https://www.w3.org/WAI/WCAG22/Understanding/non-text-content"
    ],
    "quickref": [
      "https://www.w3.org/WAI/WCAG22/quickref/#non-text-content"
    ],
    "technique": "https://www.w3.org/WAI/WCAG22/Techniques/failures/F3"
  },
  "specimen": {
    "html": "<p>Service status (meaning is only in background sprites on empty spans):</p>\n<ul class=\"f3c02-list\">\n  <li><span class=\"f3c02-dot f3c02-up\" aria-hidden=\"true\"></span> API gateway</li>\n  <li><span class=\"f3c02-dot f3c02-down\" aria-hidden=\"true\"></span> Database</li>\n</ul>",
    "css": ".f3c02-list { list-style: none; padding: 0; }\n.f3c02-dot { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: middle; background: center / contain no-repeat; }\n.f3c02-up { background-image: url(/assets/color-chart.png); background-size: 200% 100%; background-position: left center; }\n.f3c02-down { background-image: url(/assets/color-chart.png); background-size: 200% 100%; background-position: right center; }",
    "js": "",
    "assets": [
      "assets/color-chart.png"
    ]
  },
  "expectedFindings": [
    {
      "sc": "1.1.1",
      "outcome": "fail",
      "note": "Specimen demonstrates an alternate F3 failure of 1.1.1 using sprite-style background indicators."
    }
  ],
  "mustNotFlag": [],
  "manualCheck": "Confirm up/down status is not available in text, labels, or accessible names—only background-image styling.",
  "generated": {
    "url": "https://wcagfail.patternd.io/specimens/F3/c02/",
    "lastmod": "2026-10-08"
  }
}