Oh! Canvas and SVG don't support alt. Alright, let's try this.

Author: ivanreese

content/index.html

@@ -32,7 +32,9 @@ <h4>Multiplayer</h4>
     </p>
   </div>
 
-  <svg class="chop multiplayer" width="352" height="540" viewBox="0 28 352 540" alt="As we progress down the page, we'll see several pieces of a detailed illustration showing the behaviour of Automerge. In this first image, two users collaborate, swapping changes back and forth, always converging on a consistent result.">
+  <svg class="chop multiplayer" width="352" height="540" viewBox="0 28 352 540">
+    <title>Multiplayer</title>
+    <desc>As we progress down the page, we'll see several pieces of a detailed illustration showing the behaviour of Automerge. In this first image, two users collaborate, swapping changes back and forth, always converging on a consistent result.</desc>
     <use href="#multiplayer-2" />
   </svg>
 
@@ -50,7 +52,9 @@ <h4>Offline</h4>
     </svg>
   </div>
 
-  <svg class="chop offline" width="350" height="540" viewBox="240 28 350 540" alt="In this next illustration, another user works offline, their changes queuing up.">
+  <svg class="chop offline" width="350" height="540" viewBox="240 28 350 540">
+    <title>Offline</title>
+    <desc>In this next illustration, another user works offline, their changes queuing up.</desc>
     <use href="#offline" />
   </svg>
 
@@ -59,7 +63,9 @@ <h4>Consistent</h4>
     <p>When users make overlapping edits, Automerge performs a consistent merge that prevents data loss, and gives you tools to control the outcome.</p>
   </div>
 
-  <svg class="chop consistent" width="452" height="670" viewBox="30 540 452 670" alt="The third illustration — the offline user reconnects, and all three users sync their changes. Everyone converges on the same result.">
+  <svg class="chop consistent" width="452" height="670" viewBox="30 540 452 670">
+    <title>Sync</title>
+    <desc>The third illustration — the offline user reconnects, and all three users sync their changes. Everyone converges on the same result.</desc>
     <use href="#conflict_free-2" />
   </svg>
 
@@ -68,7 +74,9 @@ <h4>Versioned</h4>
     <p>Automerge remembers every change. Branch fearlessly, experiment boldly. Your document's entire history lives locally, ready when you need it.</p>
   </div>
 
-  <svg class="chop versioned" width="512" height="580" viewBox="0 1080 512 580" alt="In this illustration, an exploded view of an Automerge doc, represented by a grid of diamonds nested within a larger grid of diamonds, all connected by lines that suggest branching and merging.">
+  <svg class="chop versioned" width="512" height="580" viewBox="0 1080 512 580">
+    <title>Inside</title>
+    <desc>In this illustration, an exploded view of an Automerge doc, represented by a grid of diamonds nested within a larger grid of diamonds, all connected by lines that suggest branching and merging.</desc>
     <use href="#versioned-2" />
     <use href="#changeset-8">
   </svg>
@@ -78,7 +86,9 @@ <h4>Compact</h4>
     <p>Automerge supports millions of changes in a single doc. It uses a compressed columnar store on disk and in memory.</p>
   </div>
 
-  <svg class="chop compact" width="420" height="276" viewBox="0 0 700 460" alt="The final illustration. The document is squished down to a small size, thanks to memory compression.">
+  <svg class="chop compact" width="420" height="276" viewBox="0 0 700 460">
+    <title>Compressed</title>
+    <desc>The final illustration. The document is squished down to a small size, thanks to memory compression.</desc>
     <g transform="rotate(-90) translate(-484, -1150)">
       <use href="#compact" />
       <use href="#changeset-8" transform="translate(256, 1380) scale(7) translate(-256 -1120)">

content/index/dithering.js

@@ -2,6 +2,7 @@ const setupDitherFor = (elm, img) => {
   const aspect = img.naturalHeight / img.naturalWidth
   const canvas = document.createElement("canvas")
   const ctx = canvas.getContext("2d", { willReadFrequently: true })
+  canvas.innerText = img.alt
   elm.prepend(canvas)
   let width = 0