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

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

因为图像格式不会影响您编写替代文本的方式。

任何其他 <img> 或 <picture> 元素都相同。

Answer 2

source element 没有 alt 属性，这与 img 元素不同，您已在其中正确添加了该属性。

在 source 元素上，您可以尝试添加 aria-label attribute。

WebP 和可访问性 - 替代文本

WebP and Accessibility - Alternative Text

accessibility

alt

webp