このブログの2015年4月14日の「タイトルとサムネイル画像の重複リンク」という記事で、下層ページの一覧などに各ページのタイトルとサムネイル画像があり、そのタイトルとサムネイル画像それぞれに同じページへのリンクが貼ってあるパターンについて、スクリーンリーダーなどでは［Tab］キーで同じリンクを続けて2回辿ることになるほか、サムネイル画像の代替テキストが空だったりすると、そのリンク先を理解することが難しくなるということを書きました。

そして、これを解消する以下の3つの方法を紹介しました。

1. ページタイトルとサムネイル画像を一つのリンク内に含める
HTML5 の a 要素内には複数のブロックレベル要素を含めることができるという仕様により、ページタイトルとサムネイル画像をまとめて a 要素で囲むという方法。
2. サムネイル画像をキーボードでフォーカスさせない
これも HTML5 の仕様を利用し、サムネイル画像の a 要素に tabindex 属性で負の値を設定することで、マウスでクリック可能なまま［Tab］キーではフォーカスされなくする方法。
3. JavaScript でサムネイル画像のクリックに対応する
サムネイル画像にはリンクを設定せず、JavaScript（jQuery）を使って、サムネイル画像をクリックしたらタイトルのリンク先に遷移するようにする方法。

しかし、上記の 2. と 3. にはアクセシビリティ上の問題があるのではないかと気がつきました。

先の記事に書いたように、確かに 2. と 3. は［Tab］キーでサムネイル画像がフォーカスされることはありませんので、スクリーンリーダーユーザが迷うことはないと思います。

しかし、キーボードで操作するのはスクリーンリーダーユーザだけではありません。上肢障害等でマウスが使えないユーザ、つまり画面を見てキーボードで操作するユーザもいます。

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

画面を見てキーボードで操作するユーザも同じです。サムネイル画像を見て、リンクだと思っていたのにフォーカスできないというのは、ユーザの予測に反することになるのではないかと、実際にキーボードだけで操作してみて感じたのです。

よって、1. の「ページタイトルとサムネイル画像を一つのリンク内に含める」という方法が現時点で最善ではないかという結論に至りました。

2015年4月16日の「jquery.neosmart.fb.wall を導入しました」の記事で書いた、プロフィール画像と名前、リンクの画像とタイトルのリンク先の重複についての対策も、現在は一つのリンク内に含める方法に改めています。