<picture> 标签是否有 'alt' 属性？ — 用例：没有 <img src=""> 的图片元素

Question

我正在使用 <picture> 标签。我的目标群体使用现代浏览器，所以只要 Firefox supports WebP 就不需要使用 <img> 标签。

现在：

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

很快：

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

有没有办法在不使用 <img> 标签时为 <picture> 实现 alt 属性？

Answer 1

<picture> 标签将回退到标签内写入的字符串，所以如果你写

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

</picture>

如果浏览器不支持该标签或图片不可用，您将看到说明。

Answer 2

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

虽然您可能不关心支持不支持 <picture> 元素的浏览器，但 the HTML specification 说：

Content model:

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

img 元素是 必需的 ，因此替代文本仍由 img 元素的 alt 属性提供。

<picture> 标签是否有 'alt' 属性？ — 用例：没有 <img src=""> 的图片元素

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

html

image

accessibility

alt-attribute

picture-element