Improve accessibility for kirbytag images

Hi there,

by default, an image populates the alt attribute with the title – or even worse – the filename, when no alt attribute (or title) has been set via the kirbytag. This leads to a really annoying issue for users who need to browse the web with the help of screenreaders. Please bear in mind, that every non-empty alt attribute will be read out loudly by the voice over!

So, my suggestion would be, to just output alt="", if the alt attribute has not been set explicitly. (The alt attribute needs to be present in the markup under all circumstances, even if it’s empty!)

Please read this post by Marco Zehe for background info on the alt attribute and some more important accessibility basics: https://www.marcozehe.de/2015/12/14/the-web-accessibility-basics/

What do you guys think?

1 Like

You can easily achieve that by copying the default image tag into a file in site/tags and make any changes you want.

Right, this is what I do in my projects currently. :slight_smile:

The thing is, this is a serious issue which should be “done right” in the core.
I believe proper markup and correct semantics should enjoy high priority.

That’s very true, could you open an issue on GitHub?

I’m not sure if an empty alt tag would be the preferred way to do it. Given that all images that are placed through the kirbytag are pretty likely to be not just decorative image elements.

1 Like

It’s true, that we likely do not see too many decorative images placed via a kirbytag.
But let’s face it, most content editors don’t give a shit about anything.

So most likely in the real world we’ll deal with images named like DSC0815.jpg rather than images with a proper descriptive name we could use as a fallback. So it’s still better to fallback to an empty attribute instead of anything else. Yes, we might miss a small amount of cases, where the current fallback would be ok, but in the majority of websites I bet it’s causing harm.

We need to teach people who work with kirby how to write proper alt attributes anyway. Or even better, teach designers and content editors to always add a nice caption. So the image kirbytag will result in a nice figure + img + figcaption block. In this case btw. we definitely don’t need an alt attribute, since we have the caption which benefits both sighted and non-sighted users.

I’ll wait a bit how this discussion evolves before opening an issue. I’ll put it on my todo list for Wednesday. :slight_smile:

I’m all up for fixing this in the core. I agree that this is important. I always hoped that there would be a solution that can just be implemented automatically, but there isn’t. I started by removing the extension from the filename and use that as default, but that doesn’t cut it either. Maybe you are right and an empty alt tag would indeed be the best.

1 Like

I just opened an issue over at github: https://github.com/getkirby/kirby/issues/405