Add alt attributes to source elements

[johannesodland]

When picture elements are used for art direction (using source elements with media queries) they use distinct images depending on the environment/screen. These images might have a different layout to adapt to the screen, and would benefit from distinct replacement texts that match the selected image source.

Example

A picture element has been used for art direction. For vertical screens there is an image with a circle on the top and a box on the bottom. For horizontal screens there is an image with a circle on the left and a box on the right.

<picture>
  <source src="horizontal.jpg" media="(min-aspect: 1/1)">
  <img src="vertical.jpg" alt="A circle and a box">
</picture>

Proposal

source elements could support an alt attribute that is set on the img element when the source is selected. (Similar to how width and height properties now are set on img when a source is selceted: #5894)

<picture>
  <source src="horizontal.jpg" media="(min-aspect: 1/1)" alt="A circle to the left of a box">
  <img src="vertical.jpg" alt="A circle above a box">
</picture>

[annevk]

(Slightly related: #4478.)

[annevk]

cc @whatwg/a11y

[patrickhlauke]

it would make sense to me, yes (assuming it falls back on the alt for the <img> when there's nothing else specified in the <source>)

[scottaohara]

agreed, this proposal would be very helpful for instances where the different sources don't all match the base text alternative of the <img>.

And echoing Patrick, would want to make sure it's clear that authors only need to set an alt to a source when the base alternative text is not adequate. Otherwise, continue to use the alt from the fallback image for any source without an alt.

[hidde]

+1 to all, this would be a good addition and it closes a gap (if people were currently doing art direction that required different alternatives, they could not do that while enjoying the benefits of picture).

[aardrian]

Came here to say the same as @scottaohara and @hidde — this fits the art direction use case. So I also agree.

[zcorpan]

This was discussed in ResponsiveImagesCG/picture-element#254 back in 2014, then the conclusion was that the image ought to represent the same information even when doing art direction, and therefore alt should be the same.

[zcorpan]

@johannesodland do you have a real-world example where you think alt should be different between source elements?

[patrickhlauke]

randomly thinking: a <picture> for a site that shows a desktop/laptop when it's viewed on a large screen, a tablet on medium sized viewport, and a mobile/smartphone on small viewport ... maybe for a cutesy image of "our animated mascot reading our website" that tries to be "appropriate" to the viewport size (and inferred device) it's currently on. the alt would be changing for each image.

another one could be: where there's a large enough viewport, an image that shows a large overview of a location with a crowd, and has an inset (as part of the same image) of a zoomed-in section, to draw attention to that part. the alt would explain that the image shows the whole location, plus the inset. on smaller viewports it might just show the inset picture as a standalone image, and the alt would just refer to that.

[johannesodland]

@johannesodland do you have a real-world example where you think alt should be different between source elements?

One example I can remember is this article: https://www.nrk.no/ingvild-testet-sirkulaer-okonomi-i-praksis-1.15125257

For the header image of this article the journalists/photographer has chosen to use two different images of the same scene: For desktop there are three persons working, while on mobile there is a closer crop of the protagonist of the story.

When using "full-screen" images in articles, it is necessary to use different crops for different screens. This might leave out parts of the original image. I think the replacement text should describe what's visible in the image that is presented to the user. In this case the replacement text on desktop should contain information about the three persons, while on mobile it should only describe the main protagonist.

[aardrian]

@zcorpan

…the conclusion was that the image ought to represent the same information even when doing art direction…

In the nearly 7 years since then, and as predicted in the linked conversation, we see that real-world use has varied from the spec.