WebP and Accessibility - Alternative Text

Question

So we should all know that when using images in HTML it is good practice to provide alternative text... recently I have been looking at WebP... a new image format and the advantage is smaller file size, maintain quality and quicker websites.

However when I began looking into best practice for accessibility I couldn't find anything... no advice, no top tips on creating alternative text for screen readers for WebP images.

My code to serve alt text looks like this currently...

{% 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

The source element does not have an alt attribute, unlike the img element, where you have correctly added that attribute.

On the source element, you could try adding the aria-label attribute.