月: 2013年2月

国際電子出版EXPO2011におけるBRC松井 進氏の講演「視覚障がい者とインターネット」の講演動画

kzakza

　　一昨年の国際電子出版EXPO2011で行われたバリアフリー資料リソースセンター松井 進氏の「視覚障がい者とインターネット」の動画が公開されていました。UStreamでまだアーカイブもされているのですが、こちらのほうが画質もよさそうなので、こちらを紹介。1/4〜4/4あわせて45分です。

視覚障がい者とインターネット【国際電子出版EXPO2011】
※上の埋め込み動画は1/4から4/4が連続再生されますので、個々に視聴したい場合は上のリンクにあるYoutubeからどうぞ。
バリアフリー資料リソースセンター（BRC）副理事長　松井 進氏
2011年7月9日(土)　11:30～12:20
国際電子出版EXPO2011　ボイジャー・セルシス合同ブース内　Voyager Speaking Sessions
発表資料も公開されています。
[PDF]発表資料
　「視覚障がい者とインターネット」とありますが、内容的には視覚障害者がどのように「読書」を行うのか、支援機器のデモを交えての紹介と視覚障害者にとってのアクセシブルな電子書籍とは何かというお話でした。プレクストークリンクポケットを使った音声のみによるサピエ図書館の利用デモを観ることができたのが、個人的に非常に良かったです。
　
　プレクストークがサピエ図書のウェブサイトを音声で読み上げて利用させているのかは分かりませんが、他のウェブサイトも同様のことが本当はできなくてはいけない。GUIで利用できるだけではなく。プレクストークのような機器で音声だけでも利用することができるアクセシブルなデザインが求められているのだろうと感じました。もしかすると、これがマルチモーダルというのでしょうか。
　松井氏は講演の中で、後付けのアクセシビリティではなく、アクセシビリティを最初から盛り込んだ電子書籍をとおっしゃっていましたが、これは電子書籍に限らずの話だと思います。ウェブデザインもアクセシビリティをあらかじめ盛り込んだ「アクセシビリティファースト」な考えが普及して欲しいと願うところです。
　

紹介されたソフトウェア、支援機器など

アクセシビリティに配慮したリンクのはり方とは（その3）- 画像を用いたリンク –

kzakza

　前々回、前回のエントリに引き続き、アクセシビリティに配慮したリンクのはり方を取り上げます。
　
今回は、アクセシビリティに配慮した画像を用いたリンクのはり方です。
　画像といえば代替テキストですが、アクセシブルな代替テキストの提供方法はすでに以下のエントリで紹介したことがあります。

　上をベースにしつつ、今回は改めてリンクのはり方に焦点をあてたいと思います。

リンクテキストとしての代替テキスト

　たとえば、以下のように画像がリンクの唯一のコンテンツである場合は、画像の代替テキストがそのリンクテキストの役目を果たす事になります。

<a href="toppage.html"><img src="toppage.jpg" alt="トップページへ"></a>

　この場合はリンクの目的を伝えるテキストを画像の代替テキストとして提供します。
　以下のように画像そのものを説明するテキストを代替テキストとして提供すると、スクリーンリーダーなどの支援技術のユーザーにはこのリンクの目的が伝わりません。

#不適合事例
<a href="toppage.html"><img src="toppage.jpg" alt="トップページのスナップショット></a>

　　
　以下のように検索ボタンとして虫眼鏡の画像を使用するケースです。

　

　　検索ボタンとして使用されるので「検索」といれるほうが適切です。

<input type="image" src="image.png" alt =検索"/>

　
　検索ボタンとして使用される虫眼鏡画像の代替テキストに「虫眼鏡」といれてはなりません。

#不適合事例
<input type="image" src="image.png" alt =虫眼鏡"/>

　

参考

　
　

画像とリンクテキストの組み合わせ

　以下のように画像を用いてリンク先をビジュアル的にイメージしやすくする手法がよく使われています。

Yahoo! Japan
　　Yahoo! Japan

　　この場合、以下のように画像とテキストそれぞれに対してリンクをはり、かつ代替テキストとリンクテキストが同一だと、スクリーンリーダーでは全く同じテキストが重複して2度読まれることになります。

#不適合事例
<a href="http://www.yahoo.co.jp/"><img src="yahoo_cap.gif" alt="Yahoo! Japan" /></a>
<a href="http://www.yahoo.co.jp/">Yahoo! Japan</a>

　
　上のような場合は、リンクはテキスト及びアイコンを含み、alt属性を以下のように空にするか、

<a href="http://www.yahoo.co.jp/"><img src="yahoo_cap.gif" alt="" /></a>
<a href="http://www.yahoo.co.jp/">Yahoo! Japan</a>

　
　もしくはalt属性には画像を説明するテキストを代替テキストとして提供します。

<a href="http://www.yahoo.co.jp/"><img src="yahoo_cap.gif" alt="Yahoo! Japanのトップページのスナップショット" /></a>
<a href="http://www.yahoo.co.jp/">Yahoo! Japan</a>

　　なお、alt属性を空にして提供する場合もalt属性を省略してはいけません。
　
　a要素でp要素をラップすることに違和感を感じる方もいるかもしれませんが、HTML5からa要素はp要素やdiv要素のようなブロック要素に対しても用いることができるようになりました。

参考

　

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解説書

関連エントリ

ウェブアクセシビリティガイドラインについて
代替テキスト
リンクのはり方

アクセシビリティに配慮したリンクのはり方とは（その2）- リンクのみせ方 –

kzakza

　前回のエントリに引き続き、今回もアクセシビリティに配慮したリンクのはり方を取り上げます。
　今回は、特にリンクのみせ方についてです。ユーザーにリンクの存在を視覚的に伝えるにはどのようにリンクテキストを表現するべきなのかについて考えます。
　

全てのユーザーがリンクテキストであることを認識できるように

　視覚障害者というと全く目が見えない人を想像する人もいるかと思いますが、視覚障害者と呼ばれる人のうち、6割強がロービジョンと呼ばれる方だと言われています。ロービジョンと一言で言っても見え方は人によって様々で、Webの利用方法もその人の見え方に左右されますが、全てのユーザーがリンクテキストであることを認識できるように視覚的に表現することが求められます。これはリンクテキストの表示方法に限りませんが、今回はリンクテキストの表示方法に焦点をあててみたいと思います。

参考

下線は必要か

　ヘッダーやナビゲーション部分、メニュー部分などページのデザインや文脈から明らかにそこはリンクだとわかる部分もありますが、文中のテキストにはられたリンクを色の違いだけで表現すると、色覚異常の方は識別することができない場合があります。色の違いだけに頼らず、その他の表現方法で視覚的にリンクの存在がわかる手がかりを用意するべきです。
　何がなんでも下線でなくてはならないということではありませんが、リンクを表現する方法として下線は非常に一番なじみのある表現方法ですので、特に理由のない場合はリンクの表現には下線を用いるほうがよいのではないかと思います（逆に言えば、リンクがはられていないテキストに下線は用いるべきではありません）。
　なお、リンクをマウスオーバーした時などフォーカスがあてられた時だけ下線が表示されるウェブサイトもありますが、フォーカスをあてない限り、リンクの存在を色の違いだけで表現していることに変わりありません。参考にもあげているWCAG 2.0 実装方法集 G183では、リンクテキストとその周辺のテキストとのコントラスト比を 3:1 以上する方法を紹介していますが、同文書でも「この達成基準を満たすために十分であるが、リンクテキストを区別するには、好ましい実装方法ではない」としており、あまり望ましいものではありません。

参考

リンクテキストの適切な色は？

　
　リンクテキストの色とその他の周辺のテキストの色の違いを識別できるようにすることは当然ですが、それぞれの色が背景色との違いを識別できるようにする必要がありますので、以下のコントラスト比を考慮して色を選択する必要があります。

  1. リンクテキストの色と背景色のコントラスト比
  2. リンクテキスト周辺のテキストの色と背景色のコントラスト比
  3. リンクテキストの色とその周辺のテキストの色のコントラスト比

　
　1と2は、WCAG2.0の以下の要件が参考になります（達成基準AA以上の準拠を目指すなら参照しなくてはならない）。

　日本語で太字ではない22ポイント未満のテキストであれば、1.4.3の要件に従うなら4.5：1以上のコントラスト比、1.4.6の要件に従うなら7：1以上のコントラスト比が必要です。
　3のリンクテキストとその他のテキストの色のコントラスト比は、WCAG2.0の中で特に指定されていないようですが、1と2のコントラスト比を考慮した上でそれぞれのテキストの色の違いが識別できるコントラスト比が必要です。WCAG 2.0 実装方法集 G183はリンクテキストに下線がない場合の実装方法ですが、リンクテキストとその周辺のテキストの色のコントラスト比を3:1 以上にすべしとあるのは、1つの参考になるかと思います。
　なお、コントラスト比については、以下のようなツールが存在します。

　

参考

　

WCAG2.0（JIS X8341-3:2010）での関係する要件

　W3CのウェブアクセシビリティガイドラインであるWCAG2.0でリンクのみせ方に関係する要件は「1.4.1 色の使用」でしょうか。

1.4.1 色の使用（JIS X8341-3:2010では7.1.4.1）

情報を伝える、何が起こるか又は何が起きたかを示す、ユーザの反応を促す、もしくは視覚的な要素を区別する唯一の視覚的な手段として、色だけを使用しない。 (レベルA)
注記： この達成基準は、特に色の知覚に関するものである。その他の知覚形態については、色やその他の視覚的な表現のコーディングへのプログラムによるアクセスも含めて、ガイドライン 1.3で網羅されている。

参考: 達成基準 1.4.1 を理解する | WCAG 2.0解説書
　
　色の選択では、「1.4.3 最低限のコントラスト」と「1.4.6 より十分なコントラスト」も関係してきます。ただし、以下の要件はテキストと背景色のコントラストの要件ですのでご注意ください。

1.4.3 最低限のコントラスト（JIS X8341-3:2010では7.1.4.3）

テキスト及び画像化された文字の視覚的な表現には、少なくとも 4.5：1 のコントラスト比をもたせる。ただし、次の場合は除く： (レベルAA)
大きな文字： サイズの大きなテキスト及びサイズの大きな画像化された文字には、少なくとも 3：1 のコントラスト比がある。
付随的： テキスト又は画像化された文字において、次の場合はコントラストの要件は該当しない。アクティブではないユーザインタフェース・コンポーネントの一部である、装飾だけを目的にしている、誰も視覚的に確認できない、又は重要な他の視覚的なコンテンツを含む写真の一部分である。
ロゴタイプ： ロゴ又はブランド名の一部である文字には、コントラストの要件はない。

参考: 達成基準 1.4.3 を理解する | WCAG 2.0解説書
　

1.4.6 より十分なコントラスト（JIS X8341-3:2010では7.1.4.6）

テキスト及び画像化された文字の視覚的な表現には、少なくとも 7：1 のコントラスト比がある。ただし、次の場合は除く： (レベルAAA)
大きな文字： サイズの大きなテキスト及びサイズの大きな画像化された文字には、少なくとも 4.5：1 のコントラスト比がある。
付随的： テキスト又は画像化された文字において、次の場合はコントラストの要件は該当しない。アクティブではないユーザインタフェース・コンポーネントの一部である、装飾だけを目的にしている、誰も視覚的に確認できない、又は重要な他の視覚的なコンテンツを含む写真の一部分である。
ロゴタイプ： ロゴ又はブランド名の一部である文字には、コントラストの要件はない。

参考: 達成基準 1.4.6 を理解する | WCAG 2.0解説書

関連エントリ

ウェブアクセシビリティガイドラインについて
代替テキスト
リンクのはり方