The Vibe Coder's WCAG Checklist for Data Visualization

Quick Fix

Use semantic HTML with meaningful alt text:

<figure>
  <img src="chart.png"
       alt="Q3 revenue grew 23% to $2.1M, driven by platform sales">
  <figcaption>Q3 Revenue Breakdown</figcaption>
</figure>

The alt text should answer: what insight does this chart show? Not "bar chart of sales data" but "sales increased from $1.2M to $2.1M in Q3".

Quick Fix

Always pair charts with structured data:

<figure>
  <h3>Conversion Funnel</h3>
  <img src="funnel.png" alt="Conversion rates: 100% visitors, 45% signup, 12% purchase">
  <table>
    <tr><th>Stage</th><th>Count</th><th>Rate</th></tr>
    <tr><td>Visitors</td><td>10,000</td><td>100%</td></tr>
    <tr><td>Signup</td><td>4,500</td><td>45%</td></tr>
    <tr><td>Purchase</td><td>1,200</td><td>12%</td></tr>
  </table>
</figure>

Quick Fix

Audit your color palette. If you can only distinguish series by color, add one more signal:

• Add labels directly on bars or points
• Use different shapes (circles, squares, triangles)
• Add patterns (stripes, dots, dashes)
• Use colorblind-safe palettes (viridis, okabe-ito)

Test with: Toptal Color Filter

Quick Fix

Safe defaults for dark text on white:

• Dark gray: #333333 or darker (passes AAA)
• Avoid light gray: #999999 or lighter (fails)
• If background is colored, test each color combo

/* Dark text on light backgrounds */
axis-label-color: #333333; /* Good */
axis-label-color: #888888; /* BAD - only 4.48:1 */

/* Light text on dark backgrounds */
text-color: #f5f5f5; /* Good */
text-color: #cccccc; /* Borderline */

Quick Fix

No chart element should be lighter than #767676 on white background.

/* Safe colors on white background */
bar-fill: #2563EB;     /* Good - 8.6:1 */
line-color: #16a34a;   /* Good - 6.2:1 */
point-color: #dc2626;  /* Good - 5.9:1 */

/* Unsafe */
bar-fill: #cccccc;     /* FAIL - 2.8:1 */
line-color: #e5e5e5;   /* FAIL - 1.7:1 */

Quick Fix

Make chart elements keyboard accessible:

<g role="button"
   tabindex="0"
   aria-label="Q3 revenue: $2.1M"
   onkeydown="handleKeyPress(event)">
  <rect x="100" y="50" width="50" height="200" />
</g>

<script>
function handleKeyPress(event) {
  if (event.key === 'Enter') {
    // Show tooltip, drill down, etc.
  }
}
</script>

Use interactive SVG elements with tabindex="0", keyboard handlers, and ARIA labels.

Quick Fix

Check for motion preference and disable animations:

/* CSS: Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Normal animation */
.chart-bar {
  animation: slideIn 0.6s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .chart-bar {
    animation: none;
  }
}

Quick Fix

Add ARIA to interactive chart elements:

<svg role="img" aria-labelledby="chart-title">
  <title id="chart-title">Revenue by Quarter</title>

  <g role="button"
     aria-label="Q1: $500K"
     aria-pressed="false"
     tabindex="0">
    <rect x="0" y="0" width="50" height="100" />
  </g>
</svg>

Every interactive element needs: role (what it is), aria-label (what it says), and state (aria-pressed, aria-selected, etc.)