Overview
Before merging any new diagram to production, run through this checklist. Misses on any item degrade citation eligibility, accessibility, or visual quality. The checklist is short on purpose — these are the load-bearing things.
Structure
- The diagram is inline SVG (or HTML/CSS), not an external image file
- The `<svg>` element has a `viewBox` attribute for scaling
- `width="100%"` and `height="auto"` set for responsive sizing
- Wrapped in `<figure>` with a `<figcaption>` describing what it shows
Accessibility
- `role="img"` on the `<svg>` element
- `aria-labelledby` attribute pointing at `<title>` and `<desc>` element IDs
- `<title>` element exists as a child of `<svg>`, contains a short one-sentence summary
- `<desc>` element exists as a child of `<svg>`, contains a longer description of what the diagram conveys
Schema
- ImageObject JSON-LD block added to page `<head>`
- Block includes `name`, `description`, `contentUrl` (with anchor pointing to the diagram)
- Validated via Google's Rich Results Test — no errors
Visual
- Brand-palette colors only (cyan, mint, coral-sparingly, purple, white, body, muted) — no other colors
- Text labels at 11-14px (smaller is unreadable on mobile)
- Stroke widths: 2px for lines, 4-8px for accent strokes (never hairlines)
- Tested at 320px viewport — no label overlap, no horizontal scroll
Performance + animation
- SVG size under 10KB (if larger, evaluate whether it should be external)
- If animated: `@media (prefers-reduced-motion: no-preference)` wrapper around the animation
- Animations use `transform` and `opacity` only (not `top`, `left`, `width`, `height` — those cause layout shifts)