From 8ebe664e36bdbfeb087c4a23f05b351ae88bde65 Mon Sep 17 00:00:00 2001 From: Arian Moeini Date: Sat, 3 Oct 2026 18:59:47 +0200 Subject: [PATCH] docs(agent): add accessible progressive diagram labels --- apps/agent/skills/svg-diagrams/SKILL.md | 60 ++++++++++++++++++++++++- apps/mcp/skills/svg-diagram-skill.txt | 60 ++++++++++++++++++++++++- 2 files changed, 116 insertions(+), 4 deletions(-) diff --git a/apps/agent/skills/svg-diagrams/SKILL.md b/apps/agent/skills/svg-diagrams/SKILL.md index ca037b7..63c9fc7 100644 --- a/apps/agent/skills/svg-diagrams/SKILL.md +++ b/apps/agent/skills/svg-diagrams/SKILL.md @@ -138,6 +138,62 @@ If you're rendering inside a system that supports CSS variables, prefer: Annotation text ``` +### Progressive Labels for Dense Diagrams + +Keep each part's short name visible. Reveal longer explanations on hover and keyboard focus, in space reserved for the callout so text does not cover other parts. Give focusable parts an accessible name that includes the explanation. Add a compact `
` list after the SVG so touch users can tap to read the same information; do not rely on hover or SVG focus alone. On narrow screens, scroll the 680px diagram instead of shrinking its text below a readable size. Use the `css` parameter for the reveal rules, not a `