Alt Text and Caption not displaying for images

[VickyGarnett]

Bug report

Hi @stefanprobst - I'm drafting up a Style Guide and have created a dummy resource as an example. In that I added an image. I added both a caption and alt text to this image. However, the caption hasn't shown up in the preview, and when I hover over the image it shows me the caption text rather than the alt text I would expect.

I've added a screengrab of the preview page with it's background data to show which is the caption text and which is the alt text.

Thanks :)

V

[stefanprobst]

this is working as intended.

the cms image widget creates a markdown image, which looks like this:

![optional alt text](/path/to/image.png "optional title")

when transformed into html, we get:

<img alt="optional alt text" src="/path/to/image.png" title="optional title">

the alt attribute of an html img should be used for a description on the image for users who cannot see the image, either because they are using assistive tech like a screen reader, or because the network connection failed. when the alt attribute is set to an empty string, it signals to assistive tech that this image is only decorative.

the title attribute of any html element will be displayed as a tooltip. since hover interactions require a pointer device, we should not use the title attribute for important information, because some users (e.g. on touch devices) will not be able to see it.

if we want to display an image caption, we can use the html <figure> and <figcaption> elements. unfortunately, markdown does not have syntax to express these. this is why we need to use our custom <Figure> widget for image captions. this will generate:

<Figure alt="optional alt text" src="/path/to/image.png">
  Optional caption
</Figure>

for an example, see https://github.com/DARIAH-ERIC/dariah-campus/blob/e72af5b7496b446d1c5a0998081df746d12050d6/content/posts/introduction-to-dictionaries/index.mdx?plain=1#L79-L84

in the cms rich text field, you can insert a figure via:

and then provide the required fields:

note that the caption field supports rich-text, so you can e.g. use a link in the figure caption