Is there an 'alt' attribute for the <picture> tag? — Use case: picture element without <img src="">

1.5k Views Asked by At

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?

2

There are 2 best solutions below

1
On BEST ANSWER

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.

2
On

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.