"figure" shortcode ignore empty "alt" attributes?

skibohemen · January 14, 2023, 8:29am

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?

idarek · January 14, 2023, 9:08am

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.

frjo · January 14, 2023, 11:38am

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.

skibohemen · January 14, 2023, 4:28pm

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.

skibohemen · January 14, 2023, 4:29pm

Very useful, thanks!

idarek · January 14, 2023, 4:53pm

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.

github.com

gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/shortcodes/figure.html

<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
    {{- if .Get "link" -}}
        <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
    {{- end -}}
    <img src="{{ .Get "src" }}"
         {{- if or (.Get "alt") (.Get "caption") }}
         alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
         {{- end -}}
         {{- with .Get "width" }} width="{{ . }}"{{ end -}}
         {{- with .Get "height" }} height="{{ . }}"{{ end -}}
    /><!-- Closing img tag -->
    {{- if .Get "link" }}</a>{{ end -}}
    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
        <figcaption>
            {{ with (.Get "title") -}}
                <h4>{{ . }}</h4>
            {{- end -}}
            {{- if or (.Get "caption") (.Get "attr") -}}<p>
                {{- .Get "caption" | markdownify -}}
                {{- with .Get "attrlink" }}

This file has been truncated. show original

skibohemen · January 14, 2023, 10:38pm

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:

https://www.w3.org/WAI/WCAG21/Techniques/failures/F43

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!

idarek · January 15, 2023, 7:57am

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.

skibohemen · January 16, 2023, 9:14am

Point taken, thanks!

frjo · January 16, 2023, 1:38pm

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

github.com

frjo/hugo-theme-zen/blob/dc538ae4516c4420c5d0bacfe81363e9fbf3ba6c/layouts/shortcodes/figure.html#L90


      
          {{ end -}}
          
          
{{ if not $src -}}
          {{ warnf "%s shortcode number %d in \"content/%s\" is missing the \"src\" attribute." .Name .Ordinal .Page.File.Path -}}
          {{ else if not (or $static $resource) -}}
          {{ warnf "%s shortcode number %d in \"content/%s\" has an error in the \"src\" attribute." .Name .Ordinal .Page.File.Path -}}
          {{ end -}}
          
          
<figure class="image{{ with $class }} {{ . }}{{ end }}">
          {{ with $link }}<a href="{{ . }}">{{ end -}}
          <img src="{{ $src }}"{{ with $srcsetw }} srcset="{{ delimit  .  ", " }}"{{ end }}{{ if isset .Params "alt" }} alt="{{ $alt }}"{{ end }}{{ with $width }} width="{{ . }}"{{ end }}{{ with $height }} height="{{ . }}"{{ end }}>
          {{- if $link }}</a>{{ end }}
          {{ if or $title $caption $attr -}}
          <figcaption>
          {{ with $title }}<strong>{{ . }}</strong><br>{{ end -}}
          {{- $caption | markdownify }}{{ if and $caption $attr }} {{ end -}}
          {{ with $attrlink }}<a href="{{ . }}">{{ end }}{{ $attr | markdownify }}{{ if $attrlink }}</a>{{ end -}}
          </figcaption>
          {{ end -}}
          </figure>

powerfulwebdesign · January 21, 2023, 6:52pm

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)

skibohemen · January 22, 2023, 12:22pm

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

powerfulwebdesign · January 22, 2023, 8:11pm

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.

Topic		Replies	Views
Hugo Easy Gallery - features/parameters of figure shortcode not working support	3	556	April 21, 2021
Why does a path that works for a markdown image not work for the figure shortcode? support shortcodes	5	67	December 5, 2024
Images and contents in static support	14	1118	September 22, 2018
What is a verified bug? support	9	542	August 31, 2023
Drop-in replacement for the Hugo Figure Shortcode for lazyloading, etc tips & tricks	6	2205	October 7, 2017

"figure" shortcode ignore empty "alt" attributes?

Related topics