a11y: Prevent screen readers from reading twice

This is a quick and dirty hack to prevent screen readers from reading the content inside the `<figure>` tag twice. Credit to @jcsteh (Jamie) at https://matrix.to/#/!jmuErVonajdNMbgdeY:mozilla.org/$Esj2fvpJ5e2cJPZKQrCyzPBS8lnL0ZQc25vMMvW4lAM?via=mozilla.org&via=matrix.org&via=tchncs.de
TheEvilSkeleton · Jun 29, 2023 · b5c582a · b5c582a · jcsteh · Nov 27, 2024
1 parent 1d31961
commit b5c582a
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 7 deletions.
diff --git a/src/_includes/image.html b/src/_includes/image.html
@@ -1,8 +1,4 @@
-{% if include.caption != nil %}
-<figure>
-{% else %}
-<figure aria-hidden="true">
-{% endif %}
+<figure aria-label="&nbsp;">
   <img src="{{ include.url }}"
     alt=""/>
   <figcaption>{{ include.caption | markdownify }}</figcaption>

diff --git a/src/_includes/video.html b/src/_includes/video.html
@@ -1,5 +1,6 @@
-<figure>
-  <video src="{{ include.url }}"
+<figure aria-label="&nbsp;">
+  <video aria-hidden="true"
+    src="{{ include.url }}"
     controls="controls"
     alt="">
   </video>