mermaidlisted

# Mermaid Diagrams Accessibility Skill > **Canonical source**: `examples/MERMAID_ACCESSIBILITY_BEST_PRACTICES.md` in `mgifford/ACCESSIBILITY.md` > This skill is derived from that file. When in doubt, the example is authoritative. Apply these rules when authoring, generating, or reviewing Mermaid diagrams. **Only load this skill if the project uses Mermaid diagrams.** --- ## Core Mandate Every Mermaid diagram must include accessibility metadata and produce SVG output conforming to Pattern 11 — the most reliable pattern across screen reader/browser combinations, per Carie Fisher's testing at <https://cariefisher.com/a11y-svg-updated/>. --- ## Severity Scale (this skill) | Level | Meaning | |---|---| | **Critical** | Diagram conveys essential information with no accessible title or alternative | | **Serious** | Title present but no description on a complex diagram; contrast fails | | **Moderate** | SVG output does not implement Pattern 11; named edges lack context | | **Minor** | Title over 100 chars; duplicate IDs; missing version check | --- ## Critical: Metadata in Every Diagram **Missing `%%accTitle` on any meaningful diagram is Critical.** ``` %%accTitle Brief title (max 100 characters) %%accDescr Detailed description of what the diagram shows and why ``` **Title requirements:** * Concise and descriptive — identifies diagram type and subject * Max 100 characters * Unique within the page * Never just "Diagram" or "Flowchart" **Description requirements:** * Comp