fix a11y of the figure shortcode (#2788)

* fix a11y of the figure shortcode

Signed-off-by: HarHarLinks <[email protected]>

* Update CONTENT.md

---------

Signed-off-by: HarHarLinks <[email protected]>

Author: HarHarLinks

CONTENT.md

@@ -62,8 +62,9 @@ It is possible to add pictures to your posts in markdown. First you need to drop
 ```jinja
 {{ figure(
     img="/blog/img/your-picture-name.avif"
-    caption="A description of the picture")
-}}
+    caption="A description of the picture"          # can be set to an empty string
+    alt="A picture description for screen readers"  # optional, should only be used when leaving the caption empty
+) }}
 ```
 
 This shortcode ensures that images have a consistent look across posts.

templates/shortcodes/figure.html

@@ -1,4 +1,4 @@
 <figure style="height:100%;">
-    <img src="{{ img }}" alt="{{ caption }}" />
+    <img src="{{ img }}" {% if alt %}alt="{{ alt }}{% endif %}" />
     <figcaption>{{ caption | markdown | safe }}</figcaption>
-</figure>
+</figure>