img要素におけるalt属性は、画像が表示できない場合に代替テキストを表示します。スクリーンリーダーで画像の内容を説明するためにも必要な属性です。
また、img要素に適切なalt属性を設定することで、検索エンジンの画像検索にヒットしやすくなり、SEO効果を高めることもできますのでぜひ設定しておきたいところです。
ただ、自身でコーディングする際に忘れてしまったり、CMSで自動で挿入される画像にはそもそもaltの設定ができない場合もあります。
そこで今回は、Javascriptで画像にalt属性がない場合に自動で追加する方法を紹介します。Javascriptで後から設定するため静的・動的サイト、CMS含めて全ての画像に対応できます。
- 画像にalt属性がない場合に自動で追加する方法
- JavaScriptの変数宣言constについて
- JavaScriptのhasAttribute()、getAttribute()、setAttribute()について
- 画像のalt属性の必要性
完成したコード
まずはうんちくは後回して今回の完成コードを載せます。
const imgs = document.getElementsByTagName('img');
var src;
var filename;
for (i = 0; i < imgs.length; i++) {
if(!imgs[i].hasAttribute('alt')){
src = imgs[i].getAttribute('src');
filename = src.split("/").reverse()[0].split('.')[0];
imgs[i].setAttribute('alt', filename);
}
else if(imgs[i].getAttribute('alt') == ''){
src = imgs[i].getAttribute('src');
filename = src.split("/").reverse()[0].split('.')[0];
imgs[i].setAttribute('alt', filename);
}
}
これを見てやっていることがわかる方はこれ以降の内容は読み飛ばしOKなのでコピペして色々試してみてください。
以下、実行結果です。
See the Pen 画像にalt属性がない場合に自動で追加 by 春日清伸 (@iuvtkzzs-the-flexboxer) on CodePen.
HTMLは画像を3つ入れただけですが、
- alt属性なしのもの
- altだけがあるもの
- alt=””があるもの
の3つにしています。全て対象となりalt属性追加できます。また画像もあえて全て別のファイルタイプにしています。
この後、細かく以下に分けてコードを解説していきます。
画像を変数に代入
今回、ドキュメント内の全ての画像が対象なので、以下のコードで変数imgsにimgタグを配列で代入します。
const imgs = document.getElementsByTagName('img');
画像にalt属性があるか判定し、ない場合に追加する
変数imgsにドキュメント内の全ての画像が配列で代入されたので、ループ処理で1つずつimgタグがalt属性を持っているか判別します。
for (i = 0; i < imgs.length; i++) {//変数imgsの配列数分ループ処理する
if(!imgs[i].hasAttribute('alt')){//alt属性がない場合
imgs[i].setAttribute('alt','');//alt属性を追加
}
}
これで画像にalt属性がない場合にalt属性を追加することができます。
追加前
<img src="https://life-design-day.com/samples/p13033/32713816_s.png">
追加後
<img src="https://life-design-day.com/samples/p13033/32713816_s.png" alt>
すでに空のalt属性がある場合も判定して値を指定する
先ほどのコードではすでに空のalt属性があるものは対象になりません。ですので空のalt属性があるものについても判定して値をセットできるようにしていきます。
※装飾目的の画像にあえて空のalt属性を指定している場合はこちらの内容は飛ばしてOKです。
for (i = 0; i < imgs.length; i++) {//変数imgsの配列数分ループ処理する
if(!imgs[i].hasAttribute('alt')){//alt属性がない場合
imgs[i].setAttribute('alt','');//alt属性を追加
}
else if(imgs[i].getAttribute('alt') == ''){//空のalt属性がある場合
imgs[i].setAttribute('alt','');//alt属性を追加
}
}
else ifを追加して空のalt属性がある場合も判定しています。
alt属性の値に画像のファイル名を指定する
ただ、空のalt属性を追加するのもアレですし、かといって全て同じ値を指定するのもアレなので、今回は画像のファイル名をalt属性の値として指定します。これで最初に載せた完成コードと同じになりました。
const imgs = document.getElementsByTagName('img');
var src;
var filename;
for (i = 0; i < imgs.length; i++) {
if(!imgs[i].hasAttribute('alt')){
src = imgs[i].getAttribute('src');
filename = src.split("/").reverse()[0].split('.')[0];
imgs[i].setAttribute('alt', filename);
}
else if(imgs[i].getAttribute('alt') == ''){
src = imgs[i].getAttribute('src');
filename = src.split("/").reverse()[0].split('.')[0];
imgs[i].setAttribute('alt', filename);
}
}
これで画像のファイル名をalt属性の値として指定することができました。
追加前
<img src="https://life-design-day.com/samples/p13033/32713816_s.png">
追加後
<img src="https://life-design-day.com/samples/p13033/32713816_s.png" alt="32713816_s">
画像のalt属性の必要性
正直「alt属性ってそもそもいるのか？」と思ったことがありますが、結論から言うと必須です。
なぜかと言うと、アクセシビリティとSEOの両面で重要な役割を果たすためです。
ですのでimg要素を使用する際にはalt属性を指定しましょう。特に、文章をわかりやすくするための補足として使用している場合はそれがわかるような値が良いです。
WEBデザイナー・フロントエンドのスキルを確実に身につけたい方へ
「WEBデザインやフロントエンドを学びたい」と思い立ったとき、多くの方がまず独学を選びます。
しかし、独学では「何をどこから学べばいいかわからない」「つまずいたときに誰にも聞けない」といった壁にぶつかることも少なくありません。
一方、スクールで学べば、正しい順序で、現場で使えるスキルを効率よく習得することができます。最短ルートでスキルを身につけたい方には、スクール学習がおすすめです。
かすが私は26歳で印刷業からWEBデザイナーを目指して学び始めましたが、やはり独学に限界を感じ短期スクールで学びました。本気でスキルを身につけたいならスクールはマジで行った方が良いです！
- カリキュラムが体系化されているため、基礎から応用まで無駄なく学べる
- 現役のプロから実践的なフィードバックを受けられる
- わからないことをすぐに質問・解決できる環境がある
- 制作課題を通じて、ポートフォリオが作成できる
- 学習仲間や講師とのつながりが、モチベーション維持につながる
- カリキュラムが現場で必要とされる技術に対応しているか
- 現役デザイナー・エンジニアが講師として在籍しているか
- ポートフォリオ制作のサポートが充実しているか
- 卒業後の就職・転職支援が用意されているか
- オンライン・通学など、自分の生活スタイルに合った受講形式か
遠回りせず、確実にスキルを身につけたいなら、プロに教わるのが一番の近道です。
WEBデザイナー・フロントエンドエンジニアとして一歩踏み出したいあなたにぴったりのスクールを、下記の記事でご紹介しています。ぜひチェックしてみてください。
