前々回、前回のエントリに引き続き、アクセシビリティに配慮したリンクのはり方を取り上げます。
今回は、アクセシビリティに配慮した画像を用いたリンクのはり方です。
画像といえば代替テキストですが、アクセシブルな代替テキストの提供方法はすでに以下のエントリで紹介したことがあります。
上をベースにしつつ、今回は改めてリンクのはり方に焦点をあてたいと思います。
リンクテキストとしての代替テキスト
たとえば、以下のように画像がリンクの唯一のコンテンツである場合は、画像の代替テキストがそのリンクテキストの役目を果たす事になります。
<br /> <a href="toppage.html"><img src="toppage.jpg" alt="トップページへ"></a><br />
この場合はリンクの目的を伝えるテキストを画像の代替テキストとして提供します。
以下のように画像そのものを説明するテキストを代替テキストとして提供すると、スクリーンリーダーなどの支援技術のユーザーにはこのリンクの目的が伝わりません。
<br /> #不適合事例<br /> <a href="toppage.html"><img src="toppage.jpg" alt="トップページのスナップショット></a><br />
以下のように検索ボタンとして虫眼鏡の画像を使用するケースです。
検索ボタンとして使用されるので「検索」といれるほうが適切です。
<br /> <input type="image" src="image.png" alt =検索"/><br />
検索ボタンとして使用される虫眼鏡画像の代替テキストに「虫眼鏡」といれてはなりません。
<br /> #不適合事例<br /> <input type="image" src="image.png" alt =虫眼鏡"/><br />
参考
- H30: a 要素のリンクの目的を説明するリンクテキストを提供する｜WCAG 2.0 実装方法集
- アクセシビリティに配慮した代替テキストの話
- アクセシビリティに配慮したリンクのはり方とは（その1）–リンクテキストとリンクの配置–
画像とリンクテキストの組み合わせ
以下のように画像を用いてリンク先をビジュアル的にイメージしやすくする手法がよく使われています。
この場合、以下のように画像とテキストそれぞれに対してリンクをはり、かつ代替テキストとリンクテキストが同一だと、スクリーンリーダーでは全く同じテキストが重複して2度読まれることになります。
<br /> #不適合事例<br /> <a href="http://www.yahoo.co.jp/"><img src="yahoo_cap.gif" alt="Yahoo! Japan" /></a></p> <p><a href="http://www.yahoo.co.jp/">Yahoo! Japan</a></p> <p>
上のような場合は、リンクはテキスト及びアイコンを含み、alt属性を以下のように空にするか、
<br /> <a href="http://www.yahoo.co.jp/"><img src="yahoo_cap.gif" alt="" /></a></p> <p><a href="http://www.yahoo.co.jp/">Yahoo! Japan</a></p> <p>
もしくはalt属性には画像を説明するテキストを代替テキストとして提供します。
<br /> <a href="http://www.yahoo.co.jp/"><img src="yahoo_cap.gif" alt="Yahoo! Japanのトップページのスナップショット" /></a></p> <p><a href="http://www.yahoo.co.jp/">Yahoo! Japan</a></p> <p>
なお、alt属性を空にして提供する場合もalt属性を省略してはいけません。
a要素でp要素をラップすることに違和感を感じる方もいるかもしれませんが、HTML5からa要素はp要素やdiv要素のようなブロック要素に対しても用いることができるようになりました。
参考
- H30: a 要素のリンクの目的を説明するリンクテキストを提供する｜WCAG 2.0 実装方法集
- アクセシビリティに配慮した代替テキストの話
- ウェブコンテンツで「非テキストコンテンツと同等の目的を果たす代替テキスト」を提供しなくてもよいもの
- HTML5 の “ブロック・レベル“ リンク – html5doctor – HTML5.JP
WCAG2.0（JIS X8341-3:2010）上では？
W3CのウェブアクセシビリティガイドラインであるWCAG2.0では、「1.1.1 (非テキストコンテンツ)」、「2.4.4 (文脈におけるリンクの目的)」、「2.4.9 (リンクの目的)」が画像を用いたリンクに係る要件になります（JIS X8341-3:2010では、7.1.1.1、7.2.4.4、7.2.4.9）。
1.1.1 非テキストコンテンツ: （JIS X8341-3:2010では7.1.1.1）
利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たす代替テキストを提供する。ただし、次の場合は除く： (レベルA) “>1.1.1 非テキストコンテンツ: 利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たす代替テキストを提供する。ただし、次の場合は除く： (レベルA)
参考: 達成基準 1.1.1 を理解する | WCAG 2.0解説書
2.4.4 文脈におけるリンクの目的: （JIS X8341-3:2010では7.2.4.4）
それぞれのリンクの目的が、リンクのテキストだけから、又はプログラムが解釈可能なリンクの文脈をリンクのテキストとあわせたものから解釈できる。ただし、リンクの目的が一般的にみて利用者にとって曖昧な場合は除く。 (レベルA)
参考: 達成基準 2.4.4 を理解する | WCAG 2.0解説書
2.4.9 リンクの目的: （JIS X8341-3:2010では7.2.4.9）
それぞれのリンクの目的がリンクのテキストだけから特定できるメカニズムが利用可能である。ただし、リンクの目的が一般的にみて利用者にとって曖昧な場合は除く。 (レベルAAA)
参考: 達成基準 2.4.9 を理解する | WCAG 2.0解説書
関連エントリ
ウェブアクセシビリティガイドラインについて
代替テキスト
- アクセシビリティに配慮した代替テキストの話
- ウェブコンテンツで「非テキストコンテンツと同等の目的を果たす代替テキスト」を提供しなくてもよいもの
- アクセシビリティに配慮した顔文字、ASCIIアートの代替テキストの提供