Sensible defaults for image alt text in Shopify theme sections

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