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

こんにちは、ryohei(@ityryohei)です!

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

JavaScriptでimg要素のalt属性を自動で追加したいんだけど、良い方法ないかな?

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

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

img要素を取得する

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

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属性を持っていない場合に自動追加する

hasAttributealt属性の有無を判定し、持っていなければ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属性を持っていない場合に自動追加する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら

おすすめの書籍