CMS で作成されたサイトで、下層ページの一覧などにページのタイトルとサムネイル画像、ページの概要があり、そのタイトルとサムネイル画像それぞれに、リンク先となる同じページへのリンクが貼ってあるパターンをよく見かけます。例えば、次のような HTML です。

<h2><a href="hogehoge.html">ページタイトル</a></h2>
<div class="thumbnail"><a href="hogehoge.html"><img src="thmbnail.jpg" alt="" /></a></div>
<p>概要テキスト概要テキスト概要テキスト概要テキスト概要テキスト</p>

サムネイル画像が左に、ページタイトルと概要がその右にあるようなデザインでは、1行目と2行目が逆の場合もありますし、サムネイル画像の代替テキストにページタイトルが付けられている場合もあります。

しかし、このような HTML は、スクリーンリーダーなどでは［Tab］キーで同じリンクを続けて2回辿ることになりますし、サムネイル画像の代替テキストが空だったりすると、そのリンク先を理解することが難しくなります。

これではアクセシビリティ的に問題がありますので、これを解消する3つの方法を考えてみます。

1. ページタイトルとサムネイル画像を一つのリンク内に含める

通常、インライン要素の中にブロックレベル要素を含めることは出来ませんが、HTML5 では、a 要素内には複数のブロックレベル要素を含めることができるようになりました。そこで、ページタイトルとサムネイル画像をまとめて a 要素で囲みます。

<a href="hogehoge.html">
  <h2>ページタイトル</h2>
  <div class="thumbnail"><img src="thmbnail.jpg" alt="" /></div>
</a>
<p>概要テキスト概要テキスト概要テキスト概要テキスト概要テキスト</p>

このようにすれば、リンクは一つでリンクテキストはページタイトルのみとなりますので、スクリーンリーダーでも問題ありません。

しかし、ページタイトルとサムネイル画像が一つのブロックとなっていますので、デザインによっては CSS の調整が難しい場合があるかもしれません。

2. サムネイル画像をキーボードでフォーカスさせない

HTML5 では、tabindex 属性に負の値を設定することができるようになりました。本来は［Tab］キーによるフォーカスの順序を設定するための tabindex 属性ですが、負の値を設定することで、マウスでクリック可能なまま［Tab］キーではフォーカスされなくなります。

<h2><a href="hogehoge.html">ページタイトル</a></h2>
<div class="thumbnail"><a href="hogehoge.html" tabindex="-1"><img src="thmbnail.jpg" alt="" /></a></div>
<p>概要テキスト概要テキスト概要テキスト概要テキスト概要テキスト</p>

これでスクリーンリーダーユーザが［Tab］キーでリンクを辿った場合、サムネイル画像のリンクを飛ばしますので、混乱することはないと思われます。

サムネイル画像を囲む a 要素に tabindex="-1" を追加するだけという最も簡単な方法ですが、tabindex 属性の本来の使い方としては疑問が残ります。

3. JavaScript でサムネイル画像のクリックに対応する

文書構造としては、リンクはページタイトルのみとするのが最も妥当かと思います。

<h2><a href="hogehoge.html">ページタイトル</a></h2>
<div class="thumbnail"><img src="thmbnail.jpg" alt="" /></div>
<p>概要テキスト概要テキスト概要テキスト概要テキスト概要テキスト</p>

でも、これまでの多くの Web サイトの慣例からか、サムネイル画像があるとクリックしたくなるのが現実。タイトルのページを開きたいと思ってサムネイル画像をクリックし、何も起こらなければユーザの意に反することになります。

そこで、JavaScript（jQuery）を使って、サムネイル画像をクリックしたらタイトルのリンク先に遷移するようにします。

$(function(){
  $('div.thumbnail img').css('cursor','pointer')
  .hover(function(){
    $(this).css('opacity','0.8');
  }, function(){
    $(this).css('opacity','1');
  })
  .click(function(){
    window.location = $(this).parent('div').prev('h2').find('a').attr('href');
    return false;
  });
});

サムネイル画像にマウスカーソルを乗せた時にカーソルを指の形にし、画像を若干薄くしています。そして画像がクリックされると、その直前にある h2 要素に含まれる a 要素のリンク先に遷移します。

スクリーンリーダーではサムネイル画像はリンクと認識しませんので、ページタイトルのみを辿ることになります。

ただ、この方法は、

  • 通常リンクにマウスカーソルを乗せるとブラウザの左下にリンク先 URL が表示されますが、サムネイル画像にマウスカーソルを乗せた時にはそれが表示されない。
  • サムネイル画像の上では、右クリックによるコンテキストメニューやキーボードショートカットを使って、リンクを新しいタブや新しいウィンドウで開くことができない。

といった問題があります。

なお、今では JavaScript が無効な環境で機能しないというのを考慮する必要性は低い考えます。この場合、タイトルをクリックすれば目的は果たせるわけですし。ただ、JavaScript が無効な環境でリンクと間違われないよう、マウスカーソルを乗せた時のスタイルを CSS ファイルではなく、JavaScript で定義しています。

またこの考え方は、レスポンシブ Web デザインで、スマホサイズの時にリンクのクリック範囲を拡張する際にも応用できます。（というか、逆にそれを応用したのがこの手法なのですが）

以上、私がこれまで実装した経験のある3つの方法をあげてみました。それぞれ一長一短はありますが、デザインやサイトの特性などを考慮しながら、スクリーンリーダーユーザを含む全てのユーザが迷わないマークアップを心がけたいものです。

（2015年5月28日 追記）
その後、1. の「ページタイトルとサムネイル画像を一つのリンク内に含める」という方法が現時点で最善ではないかという結論に至っています。（続・タイトルとサムネイル画像の重複リンク）