"figure" shortcode ignore empty "alt" attributes?

Just want to ask before filing this as a bug or as a feature request:

It looks like an empty alt attribute (i.e. alt=“”) is just ignored, so the empty alt is not present on the resulting img-element in the output. This is a bad thing, as WCAG 2.0 requires all img-elements to always use the alt attribute to supply info to screen readers etc. An empty alt indicates that the image does not contain any important information, but it is not the same as a missing alt attribute.

Any opinions on this?

1 Like

No, it depends.

Hugo generally does not know which images are decorative images and which are not. You need to build some rule for that.

For accessibility reason a decorative images shall be provided with alt=“”. Typically images in posts are not decorative, so you can provide empty tag in layout but in content the empty tag is bad.

There can be long discussion about missing and empty tag for non-decorative images. Generally you shall not leave alt text empty. If it is, you shall not provide empty alt tag and this is why by default this tag is ignored in Hugo at processing stage. This is correct and don’t think that’s a bug.

Happy to discuss that, but don’t think this is anything to do with default Hugo approach, as this is correct.

Valid point I believe. An empty “alt” attribute should be applied.

Experimented a bit and replacing this code in my figure, img and svg shortcoded:

{{ with $alt }} alt="{{ . }}"{{ end }}

with this version:

{{ if isset .Params "alt" }} alt="{{ $alt }}"{{ end }}

makes it possible to set alt="" in a shortcode and have it applied in the html output.

I will likely make this change in my own Zen theme.

1 Like

Thanks, but as long as the Hugo figure shortcode has an optional alt attribute, I think it should be set on the resulting img element in the output as well, if it was used by the author - whether it was empty or not. The author may have good reasons for setting an empty value, as I have:

In Norway, public web sites must obey a number of accessibility requirements, mostly those defined by WCAG 2.1. Our Hugo driven site failed the tests for this, among them the requirement numbered 1.1.3, saying that ALL img elements MUST have an alt attribute set, and that it should be set empty if the image does not convey any important info - i.e. a pure decorative image. See here for further reference:

Of course I can use the img element instead, which I may end up with, but I always like to use Hugo shortcodes whenever I can.

Very useful, thanks!

Understand your point but tend to disagree changing behaviour for all to satisfy a few (without disrespect), especially when not everybody need to comply with something set by people, who don’t understand when this approach shall be used and when not (go back to my link on decorative images and other there).

You could always create your own shortcode, named that same (“figure”, so you will not be changing lot, and than adjust it as suggested here to do not omit empty alt tag.

Best approach is to copy template for build in figure shortcode and create your own in your layout\shortcodes folder.

This will work much better.

1 Like

Thanx a lot! I am not suggesting Hugo should be changed, I just wanted to question and understand the rationale behind the behaviour. Btw, I think it is unfair to say that WCAG 2.1 is “… to comply with something set by people, who don’t understand when this approach shall be used and when not …” I think Hugo’s defaults should try to follow the WCAG standard defined by the Web Accessibiity Initiative (WAI). The use of h4 for the figcaption is another obstruction by the way:


The good thing is that there are many workarounds as already explained in this thread, and I will probably define my own figure shortcode as explained. Thank you all for your help!

1 Like

You need to remember that Hugo is a Framework. Hugo by default does not provide a layout (theme) and built-in functions like figure shall be always treated as a base to start further development. If you working on the website, I understand that you got your customised layout. Hugo provide you with a start for figure, now you need to copy that and adjust it to your needs.

Point taken, thanks!

Implemented this for my themes shortcodes now. See for example the figure shortcode:

1 Like

Hi @skibohemen

I have written a full-feature image processing module with shortocde, render-hook and partial support.

While its stable, ideas/PR’s for improvements are always welcome.

By default it warns you if there is no ALT text. After reading this thread I am thinking there should be a way of disabling the error on a per image/page basis (currently the error can only be disabled globally)

Awesome functionality @powerfulwebdesign , thanks, I will try to use that module instead of the default figure shortcode!

Not a problem.

Shortcodes work out of the box. (img and picture)

You need to enable render-hooks (they are opt in as they modify core hugo functionality)

Any suggestions/ideas are always welcome - I am trying to get my module used in more use-cases and get feedback for improvements or V2.