I know how to set an ALT tag on an <img> if I have the class or globally to all the images on the page, however how can I do it to a specific image that doesn't have an id or class? Can I use the parent DIV somehow to reference the image and add an alt tag?

<div id="table_processing">
    <img src="processing_report.gif"> Loading Report List...
</div>

I know how to set an ALT tag on an <img> if I have the class or globally to all the images on the page, however how can I do it to a specific image that doesn't have an id or class? Can I use the parent DIV somehow to reference the image and add an alt tag?

<div id="table_processing">
    <img src="processing_report.gif"> Loading Report List...
</div>

• javascript
• jquery
• html
• css

• 1 Yes, you can. Check out how CSS selectors work, and you can apply that with querySelector to target your element – Sterling Archer Commented Dec 22, 2017 at 15:33
• You can use any CSS selector you want. – SLaks Commented Dec 22, 2017 at 15:33
• document.querySelector('img[src="processing_report.gif"]').setAttribute('alt', '<altText>'); – baao Commented Dec 22, 2017 at 15:35
• Element.querySelector(), ParentNode.children, ParentNode.firstElementChild – Andreas Commented Dec 22, 2017 at 15:35
• @baao handing out answers like that only enables these questions. :( – Sterling Archer Commented Dec 22, 2017 at 15:36

5 Answers 5

I'd remend using document.querySelector(), which allows you to select the image using CSS (jQuery-like) selectors.

Like this:

var image = document.querySelector("#table_processing img");

and then you can set the alt attribute with:

image.alt = "Our New Alt Text";

or

image.setAttribute("alt", "our New Alt Text");

Here's a demo:

var image = document.querySelector("#table_processing img");

image.alt = "Our New Alt Text";

<div id="table_processing">
    <img src="http://via.placeholder./350x150"> Loading Report List...
</div>

if you use jQuery, you could use the ID from the parent element like this:

$('#table_processing img').attr('alt', 'your text here');

This "css selector" will get all images inside the div with the id "table_processing" and sets the alt tag.

Pure/True/Real/Faster JavaScript Solution:

function setAlt()
{
    var div = document.querySelector("#table-processing");
        var image = div.querySelector("img");
            image.setAttribute("alt", "something");
}

JQuery allows you to use valid css selector, so you can use this:

$('#table_processing img').attr('alt', <text>);

I hate to keep plugging jQuery, but here is a very good example of automating missing alt tags with generic info, this is something I do to patch for WCAG AA pliance until we can edit all the content.

$("img:not([alt])").attr({ alt: "your alt text", role: "presentation" });
$("iframe:not([title])").attr({ title: "your iframe title" });

This looks for images without alt attributes, adds it and adds the value "your alt text here" along with a role for screen readers, but you can remove that. IO. also do the same for iframes and embeds that may be third parties that are out of pliance.