Make transcript the description of the image.

content/posts/website-best-practices.md

@@ -321,16 +321,16 @@ Another common offender is infinite-scrolling. In addition to requiring JavaScri
 
 #### Infinite scrolling {#infinite-scrolling}
 
-{{< transcribed-image-figure id="xkcd-1309" >}}
+{{< transcribed-image-figure id="xkcd-1309" has-transcript="true" >}}
 
 {{< picture name="infinite_scrolling" alt="Comic: if books had infinite-scroll, we'd have to turn pages carefully or risk losing the page." >}}
 
-{{< transcribed-image-figcaption >}}
+<figcaption>
 
-Infinite-scrolling means that accidentally navigating to a link will result in losing your place. Source: [xkcd](https://xkcd.com/1309/).
-
-{{< /transcribed-image-figcaption >}} {{< /transcribed-image-figure >}}
+Infinite-scroll means that accidental navigation to a link results in losing your place. Source: [xkcd](https://xkcd.com/1309/).
 
+</figcaption>
+{{< /transcribed-image-figure >}}
 {{< transcribed-image-transcript >}}
 
 Megan stands at a desk, reading a book, touching it very gingerly. Cueball is standing behind her.
@@ -565,29 +565,33 @@ An image, alt-text, figure caption, and transcript combine to form a complex rel
   <figure aria-describedby="transcript-xkcd-1309">
     <img
       src="SRC"
-      alt="Comic: if books had infinite-scroll, we'd have to
-           turn pages carefully or risk losing the page.">
+      alt="Comic: if books had infinite-scroll,
+           we'd have to turn pages carefully or
+           risk losing the page.">
     <figcaption>
-      Infinite-scrolling means that accidentally navigating
-      to a link will result in losing your place.
+      Infinite-scroll means that accidental navigation
+      to a link results in losing your place.
       See <a href=#transcript-xkcd-1309>transcript</a>.
     </figcaption>
   </figure>
-  <details id="transcript-xkcd-1309">
+  <details>
     <summary>Toggle transcript</summary>
-    <p>
-      Megan stands at a desk, reading a book, touching
-      it very gingerly. Cueball is standing behind her.
-    </p>
-    <dl>
-      <dt>Cueball</dt>
-      <dd>Why are you turning the pages like that?</dd>
-      <dt>Megan</dt>
-      <dd>If I touch the wrong thing, I’ll lose my place and
-          have to start over.</dd>
-      <dt>Caption below the panel</dt>
-      <dd>If books worked like infinite-scrolling webpages</dd>
-    </dl>
+    <div id="transcript-xkcd-1309">
+      <p>
+        Megan stands at a desk, reading a book, touching
+        it very gingerly. Cueball is standing behind her.
+      </p>
+      <dl>
+        <dt>Cueball</dt>
+        <dd>Why are you turning the pages like that?</dd>
+        <dt>Megan</dt>
+        <dd>If I touch the wrong thing, I’ll lose my
+            place and have to start over.</dd>
+        <dt>Caption below the panel</dt>
+        <dd>If books worked like infinite-scrolling
+            webpages</dd>
+      </dl>
+    </div>
   </details>
 </article>
 ```

layouts/shortcodes/picture.html

@@ -82,5 +82,10 @@
 	<img
 		width="{{ $img_width }}" height="{{ $img_height }}"
 		src="{{ $light_png.RelPermalink }}" alt='{{ .Get "alt" }}'
+		{{ with .Parent -}}
+		{{- with .Get "id" -}}
+		aria-describedby="transcript-{{ . }}"	
+		{{- end -}}
+		{{- end }}
 		decoding="async">
 </picture>{{- /* Strip trailing newline: https://github.com/gohugoio/hugo/issues/1753 */ -}}

layouts/shortcodes/transcribed-image-figcaption.html

@@ -1,3 +0,0 @@
-<figcaption>
-	{{ .Inner | markdownify | safeHTML }} See <a href="#transcript-{{ .Parent.Get "id" }}">transcript</a>.
-</figcaption>

layouts/shortcodes/transcribed-image-figure.html

@@ -1,5 +1,5 @@
 {{ with .Parent -}}
-<figure aria-describedby="transcript-{{ .Get "id" }}">
+<figure>
 {{- end }}
 {{ .Inner | markdownify | safeHTML }}
 </figure>

layouts/shortcodes/transcribed-image-transcript.html

@@ -1,9 +1,9 @@
-<details
+<details>
+<summary>Toggle transcript</summary>
+<div itemprop="embeddedTextCaption"
 {{ with .Parent -}}
 	id="transcript-{{ .Get "id" }}"
 {{- end -}}>
-<summary>Toggle transcript</summary>
-<div itemprop="embeddedTextCaption">
 {{ .Inner | markdownify | safeHTML }}
 </div>
 </details>