Есть ли атрибут 'alt' для тега <picture>? - Вариант использования: элемент изображения без <img src = "">

Я использую <picture> теги. Моя целевая группа использует современные браузеры, поэтому, как только Firefox поддерживает 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>

Есть ли способ реализовать alt атрибут для <picture> когда не используется <img> тег?

2 ответа

Решение

Моя целевая группа использует современные браузеры так. Как только Firefox поддерживает WebP, нет необходимости использовать <img> тег

Хотя вы можете не заботиться о поддержке браузеров, которые не поддерживают <picture> элемент, спецификация HTML гласит:

Модель контента:

Ноль или более исходных элементов, за которыми следует один элемент img, необязательно смешанный с элементами, поддерживающими сценарии.

img элемент является обязательным, поэтому альтернативный текст по-прежнему предоставляется alt атрибут на img элемент.

<picture> тег вернется к строке, записанной внутри тегов, поэтому, если вы напишите

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

</picture>

Вы увидите описание, если браузер не поддерживает тег или изображение недоступно.

Другие вопросы по тегам