【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入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍