続・タイトルとサムネイル画像の重複リンク
カテゴリー: アクセシビリティ
この記事は2015年5月28日に書かれたものです。情報が古い可能性がありますのでご注意ください。
このブログの2015年4月14日の「タイトルとサムネイル画像の重複リンク」という記事で、下層ページの一覧などに各ページのタイトルとサムネイル画像があり、そのタイトルとサムネイル画像それぞれに同じページへのリンクが貼ってあるパターンについて、スクリーンリーダーなどでは［Tab］キーで同じリンクを続けて2回辿ることになるほか、サムネイル画像の代替テキストが空だったりすると、そのリンク先を理解することが難しくなるということを書きました。
そして、これを解消する以下の3つの方法を紹介しました。
- 1. ページタイトルとサムネイル画像を一つのリンク内に含める
- HTML5 の a 要素内には複数のブロックレベル要素を含めることができるという仕様により、ページタイトルとサムネイル画像をまとめて a 要素で囲むという方法。
- 2. サムネイル画像をキーボードでフォーカスさせない
- これも HTML5 の仕様を利用し、サムネイル画像の a 要素に tabindex 属性で負の値を設定することで、マウスでクリック可能なまま［Tab］キーではフォーカスされなくする方法。
- 3. JavaScript でサムネイル画像のクリックに対応する
- サムネイル画像にはリンクを設定せず、JavaScript（jQuery）を使って、サムネイル画像をクリックしたらタイトルのリンク先に遷移するようにする方法。
しかし、上記の 2. と 3. にはアクセシビリティ上の問題があるのではないかと気がつきました。