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 }}

[mj991218]

plus one

[mj991218]

I have found the solution.

Let me introduce step by step

Steps to Add Video Alt Text

1. Access Your Shopify Files

   • Go to your Shopify Files page.
     (Replace your-store-permanent-handle with your actual store name.)

2. Locate Your Video File

   • Find the video currently used in your live theme.
   • Click the filename to open the file editor.

3. Add Alt Text

   • On the right sidebar, look for the "Alt text" input field.
   • Enter a concise, descriptive phrase (e.g., "Woman demonstrating yoga mat in home studio").

   

4. Save Changes

   • Click Save to apply the alt text.

Now you can see the alt attribute in the image element below the video element.

[daphimo]

Thanks man this works but I really wanted to make it automated using product title or any other stuff

[mj991218]

Thanks man this works but I really wanted to make it automated using product title or any other stuff

Glad it works! For auto-filling alt text with product titles, you can do easily by using GraphQL API, but that’s separate from this issue.