WebP и доступность - альтернативный текст

Question

Итак, мы все должны знать, что при использовании изображений в HTML рекомендуется предоставлять альтернативный текст ... недавно я смотрел на WebP ... новый формат изображений, и его преимущество заключается в меньшем размере файла, сохранении качества иболее быстрые веб-сайты.

Однако, когда я начал изучать лучшие методы обеспечения доступности, я ничего не смог найти ... ни советов, ни советов по созданию альтернативного текста для программ чтения с экрана для изображений WebP.

Мой код для обслуживания альтернативного текста выглядит следующим образом ...

{% set optimizedImages = item.itemImage.one().imageVariantsThumb %}
{% set imageTitle = item.itemTitle %}
{% set imageClass = "br-100 h4 dib pa2" %}

<picture>
         {% if craft.imageOptimize.serverSupportsWebP() %}
             <source srcset="{{ optimizedImages.srcsetWebP() }}"
                             sizes="100vw"
                             type="image/webp"
                             class="{{ imageClass }}"
                             title="{{ item.itemTitle }}"
                             alt="{{ item.itemTitle }}" />
         {% endif %}
             <img src="{{ optimizedImages.src() }}"
                        srcset="{{ optimizedImages.srcset() }}"
                        sizes="100vw"
                        class="{{ imageClass }}"
                        title="{{ item.itemTitle }}"
                        alt="{{ item.itemTitle }}" />
</picture>

Answer 1

Элемент source не имеет атрибута alt, в отличие от элемента img, где вы правильно добавили этот атрибут.

В элементе source, вы можете попробовать добавить атрибут aria-label .

Answer 2

нет советов по созданию альтернативного текста для программ чтения с экрана для изображений WebP

Поскольку в формате изображения нет ничего, что могло бы повлиять на способ написания альтернативного текста.

То же самое для любого другого элемента <img> или <picture>.