Add alt value to the archive item teaser image

[paulfioravanti]

Summary

The alt tag is currently hardcoded blank for the archive single image

minimal-mistakes/_includes/archive-single.html

Lines 16 to 24 in edae4ea

	<div class="archive__item-teaser">
	<img src=
	{% if teaser contains "://" %}
	"{{ teaser }}"
	{% else %}
	"{{ teaser | relative_url }}"
	{% endif %}
	alt="">
	</div>

It would be nice to be able to use information within the post to populate it.

Motivation

After running HTMLProofer over my site, I got lots of errors along the line of image /assets/images/foo.jpg does not have an alt attribute (line xxx) for images that generated in the "You may also enjoy" related posts section.

It would be nice, for SEO purposes if for no other reason, for the current hardcoded "" value to be changed to something a bit more dynamic.

I would propose at least initially attempting use post.header.image_description if it has been specified in the post front matter. Something like what I have currently deployed on my site:

<div class="archive__item-teaser">
  <img src=
    {% if teaser contains "://" %}
      "{{ teaser }}"
    {% else %}
      "{{ teaser | relative_url }}"
    {% endif %}
    alt=
      {% if post.header.image_description %}
        "{{ post.header.image_description }}"
      {% else %}
        ""
      {% endif %}>
</div>

I'm happy to create a PR that adds this code in.

Drawbacks

Currently, supported metadata for header images would seem to be limited to post.header.image_description, which is fine if your post.header.teaser and post.header.image refer to the same image, but probably less good if otherwise. In this case, you would probably want to use a currently non-existent post.header.teaser_description attribute. Perhaps that should be added...?

Having said that, the proposed change above is non-breaking: if you have post.header.image_description it will be used, if not, current default behaviour is maintained.

[mmistakes]

Have a look in the closed issues as this was proposed before to see what my thoughts are on adding this complexity to theme.

Adding alt values to teasers doesn't really do anything for accessibility or SEO. They're more for "decoration" than "information".

[mmistakes]

Where an alt description adds value is on the actual post/page a header images appears vs. related/archive pages smaller teasers do.

This is why it was added there in
#1138

[paulfioravanti]

I had another look in the closed issues, and I'm going to assume that this comment in #1474 refers to the issue of unnecessarily adding complexity to the theme that you were talking about.

If adding alt values to teasers provides no reasonable value to the theme but instead introduces unnecessary complexity, then I totally understand. Thanks very much for the reply and explanation; I hadn't heard of the "decoration" vs "information" argument.