Introduction
When implementing videos on your Shopify store using the {% video_tag %} liquid template, there are critical accessibility and performance elements that are often overlooked. Without proper optimization, your video implementation may fail to achieve a perfect score on Google’s PageSpeed Insights and could have accessibility issues. This guide will show you exactly how to address two key requirements that will help you achieve optimal performance and validation.
The Method
Add an Alt Tag to the Video Fallback Image
By default, Shopify’s {% video_tag %} does not include an alt attribute for the fallback poster image. This is problematic for both accessibility and SEO purposes.
Implementation:
- When using the video tag, explicitly define an alt text for the poster image
- The alt text should describe what viewers will see in the video
- This ensures screen readers can convey meaningful information to visually impaired users
Include a Track Element for Captions
HTML5 video validation requires a <track> element to be fully compliant. Shopify’s admin interface doesn’t provide a native way to add custom track elements directly to videos, but you can implement this through one of two approaches:
Option A: Add a Custom Field
- Create an additional field in your Shopify admin to accept the
.vtt(WebVTT) file URL - This allows you to specify different caption files for different videos
- Provides flexibility for multiple language support
Option B: Use a Generic Fallback File
- Create a standard
.vttcaption file - Upload it to your theme’s assets directory
- Reference this file as the default track element for all videos
- This is ideal for stores that need a quick, uniform solution
Optimize the Poster Image Size
Don’t forget to configure the image_size parameter to match your video dimensions. This ensures the poster attribute renders at the correct size, preventing layout shifts and improving Cumulative Layout Shift (CLS) scores.
Complete Implementation
For a working code example demonstrating all three optimization steps, refer to this GitHub implementation:
View the complete code solution on GitHub
The gist includes a fully validated liquid template that incorporates alt tags, track elements, and proper image sizing.
Conclusion
By implementing these two key optimizations—adding alt tags to fallback images and including track elements for captions—you’ll ensure your Shopify video implementation meets both accessibility standards and Google’s PageSpeed Insights requirements. These small but crucial adjustments can make the difference between a failing score and a perfect 100% rating, while simultaneously making your store more accessible to all users.
