CODEWITHSUNDEEP
accessibilityaltwebp
Dan Lee
Dan Lee

Reputation: 704

WebP and Accessibility - Alternative Text

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>

Upvotes: 1

Views: 1510

Answers (2)

Tsundoku
Tsundoku

Reputation: 2707

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.

Upvotes: 2

Quentin
Quentin

Reputation: 944171

no top tips on creating alternative text for screen readers for WebP images

Because there is nothing about the image format which would affect how you write alternative text.

It is the same for any other <img> or <picture> element.

Upvotes: 0

Related Questions