【JavaScript】img要素がalt属性を持っていない場合に自動追加する

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでimg要素がalt属性を持っていない場合に自動追加する方法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

img要素を取得する

ドキュメント内のimg要素を取得します。存在するタグを全て取得するため、idやclassではなくタグを指定して要素を取得します。

HTML

<img src="https://picsum.photos/id/1008/1920/1080">
<img src="https://picsum.photos/id/656/1280/720">
<img src="https://picsum.photos/id/646/1366/768">

JavaScript

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

querySelecotAllの方が使いやすい場合は変更してください。

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

img要素がalt属性を持っているか判定する

ドキュメント内に存在する各img要素がalt属性を持っているかを判定します。属性の判定にはhasAttributeを使用します。hasAttributeは要素に指定した引数を持っていればtrueを、持っていない場合はfalseを返すElementのメソッドです。（HTMLは前項と同様のため省略します。）

JavaScript

//ドキュメント内のimg要素を取得
const imgs = document.getElementsByTagName('img');

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

    if(!img.hasAttribute('alt')){
        //alt属性がない場合の処理を追記
    }

});

img要素がalt属性を持っていない場合に自動追加する

hasAttributeでalt属性の有無を判定し、持っていなければalt属性を追加します。ここでは空のalt属性を追加します。属性の追加はsetAttributeで実現することができます。

JavaScript

//ドキュメント内のimg要素を取得
const imgs = document.getElementsByTagName('img');

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

    if(!img.hasAttribute('alt')){
        //空のalt属性を追加
        img.setAttribute('alt', '');
    }

});

実行結果

上記サンプルの実行結果です。空のalt属性が設定されていることがご確認いただけます。

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

最後に

img要素のalt属性は設定が推奨されている属性ですが、コンテンツを更新する際に設定を忘れがちになる属性でもあります。スクリプトで制御してあげることで設定不足を補えるので、頻繁に更新するサイトや、CMSを導入しているサイトでは本投稿の内容を設定しておくと良いかもしれませんね。

以上、JavaScriptでimg要素がalt属性を持っていない場合に自動追加する方法のご紹介でした！