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)