【jQuery】imgタグのalt属性を取得・設定する完全ガイド｜空alt・nullチェック・一括処理・アクセシビリティまで

画像の alt 属性はアクセシビリティとSEOの両面で重要です。jQueryで alt 属性を動的に取得・設定することで、画像を切り替えた際にalt情報も同時に更新したり、空のaltを一括でチェックしたりできます。この記事では基本的な取得・設定から、空altチェック・一括処理・アクセシビリティ観点まで解説します。

alt属性を取得する

$(function () {
  // IDで指定した画像のaltを取得
  var altText = $('#main-image').attr('alt');
  console.log(altText); // 例: 'サンプル画像'

  // altが存在しない場合はundefinedが返る
  if (altText === undefined) {
    console.log('alt属性が設定されていません');
  }

  // 空のalt（装飾画像）と未設定を区別する
  if (altText === '') {
    console.log('装飾画像（alt空）');
  } else if (!altText) {
    console.log('alt属性が存在しない（アクセシビリティ上の問題）');
  }
});

alt属性を設定する

$(function () {
  // altを設定
  $('#main-image').attr('alt', '新しいalt テキスト');

  // srcを切り替える際にaltも同時に更新する
  $('#change-btn').on('click', function () {
    $('#main-image')
      .attr('src', '/images/new-photo.jpg')
      .attr('alt', '新しい写真の説明');
  });

  // altを削除する（推奨しない: アクセシビリティ問題）
  // $('#main-image').removeAttr('alt');
});

ページ内の全画像のalt属性を一括チェック・処理する

サイト内の画像のaltを一括チェックするツールや、WordPressの投稿内画像に動的にaltを設定するパターンです。

$(function () {
  // alt未設定または空の画像を検出
  var noAlt = [];
  $('img').each(function () {
    var alt = $(this).attr('alt');
    if (alt === undefined || alt === null) {
      noAlt.push($(this).attr('src'));
    }
  });

  if (noAlt.length > 0) {
    console.warn('alt未設定の画像:', noAlt);
  }

  // data-alt属性の値をalt属性にコピー（遅延ロード画像のフォールバック）
  $('img[data-alt]').each(function () {
    if (!$(this).attr('alt')) {
      $(this).attr('alt', $(this).data('alt'));
    }
  });
});

Ajax・動的コンテンツ後のalt設定

Ajaxで画像を含むコンテンツを挿入した後にaltを設定する場合は、挿入後のコールバックで処理します。

$(function () {
  $.get('/api/images', function (data) {
    // dataには <img src='...'> などのHTMLが入っているとする
    var $content = $(data);

    // 挿入前にaltを設定
    $content.find('img').each(function () {
      if (!$(this).attr('alt')) {
        $(this).attr('alt', '動的に読み込まれた画像');
      }
    });

    $('#container').append($content);
  });
});

altのアクセシビリティベストプラクティス

まとめ

jQueryでimgタグのalt属性を操作する際のポイントをまとめます。

• 取得: $("img").attr("alt")（未設定は undefined、空は ""）
• 設定: $("img").attr("alt", "テキスト")
• src切り替え時: altも必ずセットで更新する
• 装飾画像: alt="" を明示的に設定（属性なしはNG）

関連記事: attr()とprop()の違い・完全ガイド / imgタグのsrcを書き換えて画像を変更する完全ガイド

よくある質問（FAQ）