fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-27 14:12:09 +00:00
Code Issues Projects Releases Wiki Activity

Make transcript the description of the image.

Browse source
This commit is contained in:
Rohan Kumar 2022-04-22 11:48:22 -07:00
parent bec97543aa
commit 8ddc2ec879
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
5 changed files with 36 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
content/posts/website-best-practices.md
View file

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

5
layouts/shortcodes/picture.html
View file

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

3
layouts/shortcodes/transcribed-image-figcaption.html
View file

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

2
layouts/shortcodes/transcribed-image-figure.html
View file

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

6
layouts/shortcodes/transcribed-image-transcript.html
View file

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