Image gallery listing variation has empty alt attributes

[jackahl]

Image gallery listing variation has empty alt attributes. I think one could argue that they are not necessarily of decorative nature and should therefore have decent alt tags.

As you cannot edit the contents within the slideshow, the source for the alt-text should come from the source object itself. I see two ways to do this:

1. use the image objects description field --> might not be clear to editors, that this is used as alt text
2. add a new "alt text" field to image content type --> in cmf plone or plone.volto?

[davisagli]

Don't abuse the description for this. In many cases the description is shown as a caption, which is not the same purpose as alt text. The caption is text which is shown (or read) to all users and explains what the image is. The alt text is only shown (read) to users who can't see the image visually, and it adds any additional description that is needed for someone who can't see the image visually to understand it.

As long as the caption is always shown along with the image, the alt text can be empty in some cases when the caption already provides all necessary description. Repeating the same description in the alt text would be a worse UX for users with screen readers.

I would support adding alt text as a field on the Image content type. It'll also need to be a catalog metadata column in order to be included in the summary serialization for listings.

[jackahl]

@davisagli In volto core we do not show any image caption at all in the image gallery. We do have it in vlt though. We could also go ahead and add the image caption in core. I added an issue at plone.app.contentypes here: plone/plone.app.contenttypes#700

[jackahl]

I had a chat with a11y expert Jacopo Deyla (@jdeyla) about this and he explained that if images have a description next to them (like we have in vlt, see screenshot), as long as it is clear that the image is described by this text (e.g. the aria-labelledby attribute. So I would add as another suggestion, to add that description text under each image and use the described by property to connect them. But still open to more suggestions on how to tackle this issue.

[davisagli]

@jackahl One more thing to consider: Plone also shows the description field in listings, and it might not always make sense to show the same text in a listing, vs. next to or below an image.

[jackahl]

@jackahl One more thing to consider: Plone also shows the description field in listings, and it might not always make sense to show the same text in a listing, vs. next to or below an image.

@davisagli hm... I cant really see many situations where that would be the case. As the description of an image should usually describe the image.

But on the other hand, I had a look at the current implementation of the image gallery and it seems not really possible to add any other labels than the alt tag to the image due to technical limits of the gallery. I think I will push for the alt field on the content type tiself then, as I think this would be a useful addition for other cases as well

[davisagli]

Then maybe we need a better gallery. A gallery that shows images without their descriptions/captions is less useful.

[davisagli]

I cant really see many situations where that would be the case. As the description of an image should usually describe the image.

I was thinking about maybe wanting different descriptions for different contexts. like "main image for the fall 2024 marketing campaign" in the listing vs "Members of the Plone community gather to collaborate at the Salamina Sprint in Ferrara, Italy." as a caption.

Maybe this is too niche a requirement to include in core.

[jackahl]

Then maybe we need a better gallery. A gallery that shows images without their descriptions/captions is less useful.

I do agree in general, though this would mean a significant effort from our side. Another idea could be to add the option to add the labledby and describedby attributes to the library we are currently using: https://github.com/xiaolin/react-image-gallery. I am still quite undecided on what would be best. Adding the alt field to plone.app.contenttypes will probably also have implications for classic ui...