img要素におけるalt属性は、画像が表示できない場合に代替テキストを表示します。スクリーンリーダーで画像の内容を説明するためにも必要な属性です。
また、img要素に適切なalt属性を設定することで、検索エンジンの画像検索にヒットしやすくなり、SEO効果を高めることもできますのでぜひ設定しておきたいところです。
ただ、自身でコーディングする際に忘れてしまったり、CMSで自動で挿入される画像にはそもそもaltの設定ができない場合もあります。
そこで今回は、Javascriptで画像にalt属性がない場合に自動で追加する方法を紹介します。Javascriptで後から設定するため静的・動的サイト、CMS含めて全ての画像に対応できます。
この記事で身につく内容
- 画像にalt属性がない場合に自動で追加する方法
- JavaScriptの変数宣言constについて
- JavaScriptのhasAttribute()、getAttribute()、setAttribute()について
- 画像のalt属性の必要性
Contents
完成したコード
まずはうんちくは後回して今回の完成コードを載せます。
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://webdesignday.jp/samples/p13033/32713816_s.png">
追加後
<img src="https://webdesignday.jp/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://webdesignday.jp/samples/p13033/32713816_s.png">
追加後
<img src="https://webdesignday.jp/samples/p13033/32713816_s.png" alt="32713816_s">
画像のalt属性の必要性
正直「alt属性ってそもそもいるのか？」と思ったことがありますが、結論から言うと必須です。
なぜかと言うと、アクセシビリティとSEOの両面で重要な役割を果たすためです。
ですのでimg要素を使用する際にはalt属性を指定しましょう。特に、文章をわかりやすくするための補足として使用している場合はそれがわかるような値が良いです。
まとめ
今回はJavascriptで画像にalt属性がない場合に自動で追加する方法を紹介させていただきました。
上の項目の通りで本来は適切なalt属性の値が指定されていることが望ましいので、忘れてしまった場合などの保険として今回のコードを外部jsファイルに書いておくと良いですね。
RELATED ARTICLES
