How to add alt text to img tags?

How to add alt text attributes to img tags that don’t have one in Jekyll?

I have several images in my HTML content that do not have alt text and I need to add alt text. The content needs to be accessible for WCAG compliance.

The value of the alt text should be the same as the src value.
For example: testimage

How to do the above in Jekyll?

If I understood what you want… you just need to go to your html and see which liquid tags are being used inside src="" and put them inside alt="".

Does it even make sense? :wink:

Yes, in a sense.
My scenario is that I have the source HTML files imported to Jekyll and I generate a static site from them.
Now when the site is generated some image tags do not have alt text. So I need to use some sort of template/loop to add alt text to the images that don’t alt text.

Thanks for your help.

It’s hard to tell without looking at it… there many reasons why it wouldn’t work, and it is not easy to get what you mean with

I mean, if you add something to the template that will probably break the image that already have an alt=""

Anyway, assuming that your images are posts you could use the variable {{ post.url }}. Good luck (:

@lsrdg at this stage I’m not too concerned about breaking the existing images with alt text already.

Could you give an example of how you would use the { post.url }} variable for illustration?

Thanks

Great!

{{ post.url }} is the post’s url. Maybe a more generic one would be {{ page.url }}, you can take a look at Variables | Jekyll • Simple, blog-aware, static sites .


However, I’m sorry, reading your original post again, it seems I’ve misunderstood your question… you want the alt value to be the same as the image’s src, not the page’s source, right?

You can probably achieve that by creating some liquid logic, maybe by assigning or capturing the the src and using it in the alt value. But I fail to see how to fully automate that…

Sorry again, and hopefully some one else shows up here. I’m curious about it as well. :wink:

Would it work to add the alt text with JavaScript?

The requirement is to have the alt text in the generated static html files so if we can achieve that using javascript then that is ok.
The object is to have the alt text in place before running Section 508/WCAG accessibility check utility.

Thanks for your reply.

The alt text will not be in the generated static files if you use JavaScript, as they will be added after the page has finished loading in a browser. I do not know if WCAG checkers allow JS to run.

That’s what I thought.

Thanks for your reply.

How many images are we talkin’ about?
Are these images in content or in layouts?

Anyway, you’ll have to search for empty alt tags and copy the src attribute.

For content files, if you have Markdown, Jekyll will output the alt text correctly:

![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")

generates

<img src="https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png" alt="alt text" title="Logo Title Text 1">

It’s very poor a11y to add the src attribute to alt tags, I can’t image a blind user using a screen reader and having to listen to the whole
image path instead of a useful information. You should try it and you’ll quickly understand why it’s a bad idea. :cry:

And some images do not need an alternative if the context provides explanation or if they are simply decoration.

1 Like

@Frank thanks for your reply,

This approach is going to be temporarily until I get the appropriate description for every image in the content.

I am currently using HTML not Markdown and the images are in the content not in layout.

Even though setting the alt tag value to the src value is a bad idea, do you know how to conduct the img tag search in the content? It is the ability to search and alter the img tag that I am really after.

Thanks,

Do you want to add alt text to the image in the markdown file?

Yes, though my source files are in HTML.

Thanks,

Can you share the link to your repository, so that I can understand your issue better?

potential css fix?

Hello @yashumittal,

My project is not hosted on Github, it is on our intranet. I won’t be able to share it. I can share sample html content if that is fine with you.

Thanks for your reply.

Hello Matt,

I just tried your suggestion and if there is no other viable way of achieving what I am requesting then I can use your approach at least.

Thanks a lot.