4

I am using <picture> tags. My target group uses modern browsers, so as soon as Firefox supports WebP there is no need to use the <img> tag.

Now:

<picture>
    <source srcset="image-200px.webp 1x, image-400px.webp 2x" type="image/webp">    
    <img src="image-200px.jpg" alt="Description">
</picture>

Soon:

<picture>
    <source srcset="image-200px.webp 1x, image-400px.webp 2x">
</picture>

Is there a way to implement an alt attribute for <picture> when not using the <img> tag?

unor
  • 92,415
  • 26
  • 211
  • 360
dash
  • 1,249
  • 3
  • 17
  • 25

2 Answers2

12

My target group uses modern browsers so. As soon as Firefox support WebP there is no need to use the <img> tag

While you might not care about supporting browsers which do not support the <picture> element, the HTML specification says:

Content model:

Zero or more source elements, followed by one img element, optionally intermixed with script-supporting elements.

The img element is mandatory, so the alternative text is still provided by the alt attribute on the img element.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Good to know, thanks. Then I will go on using the `img` element within the `picture` element. – dash Jan 28 '19 at 14:24
-1

The <picture> tag will fall back to the string written inside the tags, so if you write

<picture>
    <source srcset="image-200px.webp 1x, image-400px.webp 2x">
    Some description

</picture>

You will see the description if the browser doesn't support the tag or image is unavailable.

Athene noctua
  • 82
  • 1
  • 7
  • 1
    [A validator](https://validator.nu/) reports "Error: Text not allowed in element picture in this context." And [the spec](https://www.w3.org/TR/html5/semantics-embedded-content.html#the-picture-element) says: Zero or more source elements, followed by one img element, optionally intermixed with script-supporting elements. – Quentin Jan 28 '19 at 11:10
  • Also, I suspect error recovery means that if the browser does support the element, but the user is using a screen reader, the invalid text will be ignored instead of being read out. – Quentin Jan 28 '19 at 11:13