Automatically Add the Image Alt Attribute with JavaScript

In this article, you will learn how to add the alt attribute to the image automatically with JavaScript.

Get the img element

Gets the img element in the document.
In order to get all existing tags, specify the tag instead of id or class to get the element.

HTML

<img src="#">
<img src="#">
<img src="#">

JavaScript

const imgs = document.getElementsByTagName('img');

Determine if the img element has an alt attribute

Determines if each img element present in the document has an alt attribute.
Use hasAttribute to determine the attribute.
The hasAttribute is an Element method that returns true if the element has the specified arguments, false otherwise.

JavaScript

const imgs = document.getElementsByTagName('img');

Array.from(imgs).forEach(function(img){

    if(!img.hasAttribute('alt')){
        //Processing when there is no alt attribute
    }

});

Automatically add if img element does not have alt attribute

Use hasAttribute to determine if the alt attribute is present, otherwise add the alt attribute.

JavaScript

const imgs = document.getElementsByTagName('img');

Array.from(imgs).forEach(function(img){

    if(!img.hasAttribute('alt')){
        //Add alt attribute
        img.setAttribute('alt', '');
    }

});