Search code examples
htmlimageaccessibilityalt-attributepicture-element

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


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?


Solution

  • 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.