capsite/docs: describe the wiring diagram for screen readers

The SVG gets role="img" with a <title> and a <desc> that says in prose
who refers to what, since the arrows carry the meaning and are invisible
to assistive tech. The rendered PNG is unchanged.

Generated-by: Claude Opus 5.5
This commit is contained in:
dckc committed 2026-10-09 02:32:22 -05:00
1 parent a921d65021
commit 7876938f3e
1 file changed
+14 -1
+14 -1
View File
@@ -9,7 +9,20 @@
.mono { font-family: "DejaVu Sans Mono", monospace; } .mono { font-family: "DejaVu Sans Mono", monospace; }
</style></head> </style></head>
<body> <body>
<svg id="c" xmlns="http://www.w3.org/2000/svg" width="1120" height="820" viewBox="0 0 1120 820"> <svg id="c" xmlns="http://www.w3.org/2000/svg" width="1120" height="820" viewBox="0 0 1120 820"
role="img" aria-labelledby="title desc">
<title id="title">webapp cookie rotation: who holds what</title>
<desc id="desc">Three actors and two makers. Alice holds a reference to a store made by
makeMapStore, and to diigo-cache, which she wired up. She rotates the cookie
by saying: await E(store).set("cookie", freshCookie). The store, and its
read-only facets, both refer to the store's kv table, whose one row maps
"cookie" to the session; its shapes are keyShape "cookie" and valueShape
M.string(). makeWebApp makes access objects; each refers to its init
table: url, headers, and headerStore. headerStore refers to the store's
read-only facet, which access reads at every send. diigo-cache holds a
reference to access. Mallory, who learned the instance id, also holds a
reference to access, so she can use the cookie, but she has no reference
to the store, so she cannot rotate it or swap in her own session.</desc>
<defs> <defs>
<radialGradient id="ball" cx="40%" cy="35%" r="70%"> <radialGradient id="ball" cx="40%" cy="35%" r="70%">
<stop offset="0%" stop-color="#7cc8f8"/> <stop offset="0%" stop-color="#7cc8f8"/>