video_tag fallback image missing alt attribute

[bigskillet]

video_tag fallback image missing alt attribute and triggering Lighthouse accessibility error: https://shopify.dev/docs/api/liquid/filters/video_tag

[bigskillet]

...and why is there an image tag inside the video tag anyways? It doesn't render on any browsers if the poster is empty. Is it necessary and/or semantic?

[ryanm-bw]

@Shopify could we please get this one actioned? It should be a simple change and is then consistent with img_tag, as well as complying with Lighthouse.

[PreranaSunbowl]

Can this be fixed pelase?

[anthony-spain]

Found this while doing an ADA audit today, still an ongoing issue.

[mcvmel]

Ran into this as well recently. This may depend on your theme, but after uploading the video in the theme customizer, you can click on the video thumbnail and a black overlay will appear. In that screen there is a space for alt text. This fixed my issue.

[andrewhawkes]

This is still an issue. Ideally is should be possible to pass an empty alt value or custom.

[0x15f]

+1

In Lighthouse 12.2.0 when the video is below the fold the <img /> gets flagged as an eagerly loaded offscreen image. It also lacks an alt. The video spec mentions nothing on the inclusion of an <img /> inside of <video />

The spec for video poster in Liquid either needs to be fixed or expanded to allow us to:

• Remove it.
• Specify an alt tag.
• Specify media queries for poster.

This is not the way 👇

{% capture video_elem %}
  {{ video | video_tag: playsinline: '', muted: '', loop: '' }}
{% endcapture %}

{% if section.index < 2 %}
  {% comment %} make poster lazy {% endcomment %}
  {% assign video_elem = video_elem | replace: '<img', '<img loading="lazy"'  %}
{% endif %}

{{ video_elem }}