Member-only story

Sensible defaults for image alt text in Shopify theme sections

Stephen Keable
2 min readAug 8, 2023

--

As developers we all know that images should always have alt text defined firstly for accessibility and secondly for SEO, so we tell client’s it’s an important field. However after building a theme or even just a new section for a client, we know that they will get lazy at some point and stop inputting the text.

Remember to fill out your alt tags

So I’ve gotten into a habit of adding fallbacks in my code if the property is empty, instead of the usual tag below (other attributes remove for brevity):-

{{ 
block.settings.image
| image_tag:
alt: block.settings.image.alt
}}

I’m adding a default filter to the alt text, with a field from a section that the client is likely to not leave blank. Such as the section heading field.

{%- assign image_alt = block.settings.image.alt | default: section.settings.heading -%}
{{
block.settings.image
| image_tag:
alt: image_alt
}}

This might not be perfect, however if the field is going to be filled with text that somewhat relates to the image it should be better than a blank alt tag.

Maybe at some point down the line the “Shopify Magic” ML text generation can help fill the field with a better description of the image, if the client leaves an alt tag empty.

If you found this useful maybe drop me a tip so I can buy a coffee — https://ko-fi.com/stephenkeable

--

--

Stephen Keable
Stephen Keable

Written by Stephen Keable

Shopify partner, JavaScript/Liquid/Swift developer, convert to serverless architecture and builder of digital products people love to use since 1999.

No responses yet