kzakza前々回、前回のエントリに引き続き、アクセシビリティに配慮したリンクのはり方を取り上げます。今回は、アクセシビリティに配慮した画像を用いたリンクのはり方です。画像といえば代替テキストですが、アクセシブルな代替テキストの提供方法はすでに以下のエントリで紹介したことがあります。アクセシビリティに配慮した代替テキストの話ウェブコンテンツで「非テキストコンテンツと同等の目的を果たす代替テキスト」を提供しなくてもよいもの上をベースにしつつ、今回は改めてリンクのはり方に焦点をあてたいと思います。X8341-3:2010では7.2.4.9)関連エントリウェブアクセシビリティガイドラインについて代替テキストリンクのはり方リンクテキストとしての代替テキストたとえば、以下のように画像がリンクの唯一のコンテンツである場合は、画像の代替テキストがそのリンクテキストの役目を果たす事になります。[xml][/xml]この場合はリンクの目的を伝えるテキストを画像の代替テキストとして提供します。以下のように画像そのものを説明するテキストを代替テキストとして提供すると、スクリーンリーダーなどの支援技術のユーザーにはこのリンクの目的が伝わりません。検索ボタンとして使用されるので「検索」といれるほうが適切です。[xml][/xml]検索ボタンとして使用される虫眼鏡画像の代替テキストに「虫眼鏡」といれてはなりません。画像とリンクテキストの組み合わせ以下のように画像を用いてリンク先をビジュアル的にイメージしやすくする手法がよく使われています。Japanこの場合、以下のように画像とテキストそれぞれに対してリンクをはり、かつ代替テキストとリンクテキストが同一だと、スクリーンリーダーでは全く同じテキストが重複して2度読まれることになります。Japan[/xml]もしくはalt属性には画像を説明するテキストを代替テキストとして提供します。Japan[/xml]なお、alt属性を空にして提供する場合もalt属性を省略してはいけません。a要素でp要素をラップすることに違和感を感じる方もいるかもしれませんが、HTML5からa要素はp要素やdiv要素のようなブロック要素に対しても用いることができるようになりました。X8341-3:2010では、7.1.1.1、7.2.4.4、7.2.4.9)。X8341-3:2010では7.1.1.1)利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たす代替テキストを提供する。利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たす代替テキストを提供する。X8341-3:2010では7.2.4.4)それぞれのリンクの目的が、リンクのテキストだけから、又はプログラムが解釈可能なリンクの文脈をリンクのテキストとあわせたものから解釈できる。リンクの目的が一般的にみて利用者にとって曖昧な場合は除く。X8341-3:2010では7.2.4.9)それぞれのリンクの目的がリンクのテキストだけから特定できるメカニズムが利用可能である。リンクの目的が一般的にみて利用者にとって曖昧な場合は除く。代替テキストアクセシビリティに配慮した代替テキストの話ウェブコンテンツで「非テキストコンテンツと同等の目的を果たす代替テキスト」を提供しなくてもよいものアクセシビリティに配慮した顔文字、ASCIIアートの代替テキストの提供リンクのはり方リンク先を別ウィンドウ(タブ)で表示させることはアクセシビリティ上どうなのか。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。