How do I add Alt Image Tags to my photos?

Question

I am trying to figure out how to add alt image tags to my photos. I was under the impression that the "file name" served as the alt image tag in Craft CMS, but no such alt tags are populating...and furthermore...I really have no idea where I can add them. Can I do this from the assets field?

Answer 1

Out of the box, you can use the image "Title" as alt text. Since it is already configured - you don't need to add any additional fields. Then you can output this in your twig template as:

{% set image = image.yourImageField.one() %}
<img src="image.url" alt={{ image.title }}">

For semantics, you may not want to use the "Title" field. Or, you may be using "Title" for something else. In that case, you can add a new text field to your asset called "Alt Text". It will then appear right below "Title" in your image/asset editing dialogue.

{% set image = image.yourImageField.one() %}
<img src="image.url" alt={{ image.altText }}">

Answer 2

An updated answer for 2023: Alternative Text is available to assets as a native field in Craft CMS 4.

To enable it, within Settings > Media: Assets > Volumes > Field Layout, add the "Alternative Text" field found in the sidebar to the asset content (see screenshot).

Within your template, use asset.alt to render. Your image call could look something like this:

{% set asset = block.imagefieldname.one() %}
<img src="{{ asset.url }}" alt="{{ asset.alt }}" />

To edit the alt field:

• When on an entry: after adding an asset to a field, double click the asset to open a contextual menu.
• From the Assets dashboard: just click the asset.

Note: Mozilla recommends not using the HTML title attribute. From CraftCMS dev perspective, it's not recommended to render title field as the alt text either as you cannot leave it blank for decorative images. There's probably use cases for it but I haven't discovered them.