Our charts passed a visual review and failed an a11y audit hard: color-only encoding, no keyboard access, screen readers announcing a wall of unlabeled paths. Retrofitting was miserable, so I moved the requirements into the generation prompt.
The key was demanding a data-table fallback as a first-class deliverable (not a hack), a colorblind-safe palette with redundant encoding, and a described-summary of the trend. The model now produces charts that are legible to a screen reader and survive a contrast checker on the first pass.
Sharing the prompt. Would love pushback on whether the visually-hidden table is the right pattern versus a toggle.
Generate an accessible chart (SVG-based, framework-agnostic) that passes WCAG 2.1 AA. Treat accessibility as a primary deliverable, not an add-on:
1. Semantics: root svg with role='img' and an aria-label that SUMMARIZES the takeaway ('Revenue rose 18% from Jan to Jun, dipping in April'), not just 'a chart'. Decorative elements aria-hidden.
2. Data-table fallback: emit a real, visually-hidden <table> with the underlying data, associated with the chart, so screen readers get the numbers. This is required, not optional.
3. Color: use a colorblind-safe categorical palette AND a redundant channel (line dash pattern or direct labels) so nothing relies on hue alone. State the palette and why.
4. Contrast: every text/axis element must hit >= 4.5:1 (>= 3:1 for large); print the computed ratios for axis labels and the smallest text.
5. Keyboard: focusable data points (tabindex), arrow-key navigation between them, and a live-region announcement of the focused point's value.
6. Motion: any transition respects prefers-reduced-motion.
Before the code, output an accessibility checklist mapping each item above to how it's satisfied. Then the single-file implementation.