画像の代替テキスト（alt 属性）は、Web アクセシビリティの基本中の基本とよく言われますが、適切な代替テキストを付けるということに関しては十分に考慮しなければなりません。

参考：HTML5: 有用な代替テキストを提供するためのテクニック

また、画像がリンクとなっている場合、その代替テキストは単に画像の代わりではなく、同時にリンクの目的を示すものである必要があります。例えば、その Web サイトのホームへのリンクとなっているロゴ画像の場合、その代替テキストは “有限会社Willさんいん” ではなく “有限会社Willさんいん ホーム” などとすべきです。

画像がリンクとなっているパターンの一つとして、近年よく使われている Lightbox 系のスクリプトがあります。サムネイル画像をクリックすると、拡大画像がオーバーレイで表示されるというものですが、当然この場合もサムネイル画像の代替テキストはリンクの目的を示さなければなりません。例えば、”○○の拡大画像” といった具合です。

でも、CMS などの WYSIWYG エディタの中で更新担当者が自由に挿入する画像の場合、画像の代替テキストはアップロードする際に付ける場合が多く、その画像をリンクとして挿入するかどうかは後で決めることが多々あると思います。そもそも、拡大画像へのリンクは代替テキストを変更するという運用の徹底は難しいでしょう。

そこで、jQuery を使って拡大画像にリンクする場合の代替テキストを書き換えてみます。

jQuery(function($){
  $('a[href$=".jpg"], a[href$=".JPG"], a[href$=".jpeg"], a[href$=".JPEG"], a[href$=".gif"], a[href$=".GIF"], a[href$=".png"], a[href$=".PNG"]').each(function(){
    var alt = $(this).children('img').attr('alt');
    $(this).children('img').attr('alt', alt + 'の拡大画像');
  });
});

リンク先の URL が “.jpg” や “.gif” などで終わる画像ファイルの場合に、その a 要素の中にある img 要素の alt 属性の値を取得し、改めて取得した値に “の拡大画像” を追加した alt 属性を設定しています。

また、サムネイル画像の後にキャプションがあり、同じテキストを繰り返すことから代替テキストを空にする場合もあります。しかし、そのサムネイル画像が拡大画像へのリンクとなっている場合、代替テキストが空では元も子もありません。

<figure>
  <a href="photo.jpg"><img src="photo_thumb.jpg" alt="" /></a>
  <figcaption>キャプション</figcaption>
</figure>

上記のような HTML の場合、次のように記述することができます。

jQuery(function($){
  $('a[href$=".jpg"], a[href$=".JPG"], a[href$=".jpeg"], a[href$=".JPEG"], a[href$=".gif"], a[href$=".GIF"], a[href$=".png"], a[href$=".PNG"]').each(function(){
    if ($(this).next('figcaption')){
      var alt = $(this).next('figcaption').text();
    } else {
      var alt = $(this).children('img').attr('alt');
    }
    $(this).children('img').attr('alt', alt + 'の拡大画像');
  });
});

この場合、キャプション（ figcaption 要素）があればそのテキストを、そうでなければ alt 属性の値を取得して、リンク画像のalt属性を設定しています。

アクセシビリティのチェックツールでは、代替テキストが設定されているかどうかはチェックできますが、その内容が適切かどうかはチェックできません。コンテンツの制作あるいは試験を実施する際に、人間が適切かどうかを判断する必要があります。

なお、このような Lightbox 系のスクリプトは、拡大画像の下に表示するキャプションを、a 要素の title 属性の値で設定するようになっているものが多いですが、title 属性の使い方としては疑問です。

そこで、title 属性は使わないで、上記で取得した alt の値を拡大画像の下に表示するという方法も考えられます。