Alt Tags

Hi there, first of all this is a great plugin, been using it for quite a while to render SVG files and it’s great, I do generally find I need to use the Force Inline images advanced option – not sure if that affects my problem below:

I’ve been asked to improve accessibility of a website, things like alt tags etc. The issue I have is that my SVG images are not rendered with alt text. So in the HTML if I have (your example from settings page)

<img class="style-svg" alt="alt-text" src="image-source.svg" />

the alt tag is removed when you view the page source as the SVG is rendered inline.

I am asking if there is a way to make the alt tag persist. I know that SVG images don’t support alt tags but according to css tricks and other resources it can be done via the title and description tag. So I would like to know if you can add that to your plugin please? I’m aware I could edit the SVG files directly and add the attribute, but I think it would work better if the plugin dynamically done it by taking a user defined alt tag. Quite often an image may be reused around a site with different meanings, so user defined alt tags (in the img tag) are better than being hardcoded into the file itself.

I was thinking you could back it up by adding a default alt text “Inlined SVG Image” or something simple as the default title in case someone doesn’t define an alt tag in their image tag. This would provide better accessibility and potentially improve page scores that use accessibility as a scoring metric.

To make it work I believe you would need to make your plugin inject a title tag into the image I’ve linked some resources that should help if you wanted more info

css tricks link: https://css-tricks.com/accessible-svgs/#aa-2-inline-svg

https://accessibilityinsights.io/info-examples/web/svg-img-alt/

https://www.smashingmagazine.com/2021/05/accessible-svg-patterns-comparison/

I would love to know if this is something you’d consider adding to your plugin?

Thanks