I am using a stack that allows the user to add an image but does not have an option for an alt tag.
Anyone have any code to share where I can add a default alt tag to an image if the alt tag is empty?
I wanted to edit the original post to put a link: https://xrdi.com/about/timeline/
Wouldn’t it be easier and more sensible to use a better image stack?
Which image stack are you using? If you’re using the one that comes with Stacks, then you need to double-click the image after it’s dropped on the stack to see additional options, including Alt Text.
That would probably defeat the purpose of the alt attribute.
The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.
The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
I’m not sure how you can have a default tag that could describe every possible image.
Images that convey no information, but are purely decorative, can use an empty alt="" tag. That makes the page navigable for users of screen readers or non-graphical browsers.
Alhoa @DLH I am using 1LD feature section/ feature card stack. When I double click there is no option to edit like in native image stack.
I am going to try putting JavaScript that takes an empty alt attribute and adds text.
agreed @Rovertek!
It looks like the 1LD Feature Section stack only has an option for a background image and not a regular image. There is a difference in how images are used. Background images are applied with CSS and therefore do not have alt tags.
the option to add an image is there so it does not indicate that this is a background image.
the option to add an image is there but the option to add an alt attribute is not there. And when I look at the source code I see that there is and img`` attribute but no alt``` tag.
I don’t have the stack and was going by the setting shown here: https://www.onelittledesigner.com/rapidweaver-stack/feature-section/tutorial/
The only place I see an image is for card background. If there is a place for real images (not backgrounds), then I’d just ask if they can add an alt tag option.
I am trying to use JavaScript to create and insert an alt attribute to the image. This is what I have so far but it is not working. Any suggestions:
$(document).ready(function() {
$(".feature-card > img").each(function() {
$(this).attr("alt", "create and insert my new alt tag here");
});
});</script>
this fines each img tag in the feature-card class and adds alt attribute. But it is not working as expected.
What’s not working? I don’t have the stack, but it should work, I just copied it, added an open <script> tag put it in an HTML stack and added an img stack with a class of feature-card and it added the alt tag.
Do you have a URL?
The jquery is not adding an alt attribute to the img tag. It’s working for you? That’s great!
The url is: https://xrdi.com/about/timeline/
I don’t see where you added the jquery code above?
How did you add it?
I put it in an html stack (you left off the openning <script> tag above.
Can I be so bold and ask what you are trying to accomplish by adding ALT attributes and content client-side with Javascript?
These ALT attributes will not be seen by search engines indexing your website. And I imagine they’d be of very limited use to screen readers and other assistive tools. Ideally ALT attributes need to be hard-coded into the page.
As mentioned already, images that are provided purely for webpage cosmetics (like background wallpapers) do not require ALT attributes. You either leave the ALT attribute empty on an image or you set the image as a CSS background.
It’s only the images that form an integral part of your content (like images used to show products or promote services) that require the ALT attribute. Because in these situations, it is necessary to describe what the image is about; for the benefit of search engines, screen readers and other tools.
More info: https://html.com/attributes/img-alt/
I don’t own the aforementioned card stack and cannot see a free demo for it. But I imagine if there is no ALT field in the settings, it was not intended to be used for content-critical images - only images to be used for decoration.
I try to give all images, even ones which are used as background images, informative names. I don’t know if that helps with SEO when there is no ALT attribute, but it can’t do any harm and it makes images easier to identify.
thanks for all the replies! The developer was kind enough to send me an updated version with the option to add an alt tag.
@willwood makes sense! Bots will not see the alt tag because JavaScript would render it on the client side.
Sorry folks to remind you Google’s indexing mechanism is executing JavaScript since some time now already.
@instacks I am talking about search engines in the collective sense - grouping together Google, Bing, Yahoo, Baidu, DuckDuckGo, Yandex and all the others out there.
A lot of these do not support Javascript. They might be less aggressive with their spidering or use older indexing algorithms. Same with all the search stacks for RapidWeaver.
The consensus amongst many experts is not to rely on Javascript to dynamically insert content into webpages - IF you need it seen by all search engines or available for assistive devices.
There are a lot of times when certain search engines will not see content being added with Javascript. Google is not the only search engine people use - especially with all the privacy concerns of late.
My advice to RapidWeaver users remains unchanged - ALT attributes for important images that need to be seen by search engines or broadcasted to assistive devices should have their ALT attributes hard-coded into the page. Then you are guaranteed everything and everyone will see them.
Sure. Other search engines will evolve too and include JavaScript also in the future. My 2 cent.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.