Alt Text and Caption not displaying for images

[VickyGarnett]

Alt Text and Caption not displaying for images

[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

dariah-campus/content/posts/introduction-to-dictionaries/index.mdx

Lines 79 to 84 in e72af5b

	<Figure
	src="http://i.imgur.com/mvV1Z9k.jpg"
	alt="Page from a dictionary"
	>
	Тhe Chambers Dictionary
	</Figure>

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