kzakza前回のエントリに引き続き、今回もアクセシビリティに配慮したリンクのはり方を取り上げます。今回は、特にリンクのみせ方についてです。ユーザーにリンクの存在を視覚的に伝えるにはどのようにリンクテキストを表現するべきなのかについて考えます。全てのユーザーがリンクテキストであることを認識できるように視覚障害者というと全く目が見えない人を想像する人もいるかと思いますが、視覚障害者と呼ばれる人のうち、6割強がロービジョンと呼ばれる方だと言われています。ロービジョンと一言で言っても見え方は人によって様々で、Webの利用方法もその人の見え方に左右されますが、全てのユーザーがリンクテキストであることを認識できるように視覚的に表現することが求められます。これはリンクテキストの表示方法に限りませんが、今回はリンクテキストの表示方法に焦点をあててみたいと思います。(平成18年7月1日調査)下線は必要かヘッダーやナビゲーション部分、メニュー部分などページのデザインや文脈から明らかにそこはリンクだとわかる部分もありますが、文中のテキストにはられたリンクを色の違いだけで表現すると、色覚異常の方は識別することができない場合があります。色の違いだけに頼らず、その他の表現方法で視覚的にリンクの存在がわかる手がかりを用意するべきです。何がなんでも下線でなくてはならないということではありませんが、リンクを表現する方法として下線は非常に一番なじみのある表現方法ですので、特に理由のない場合はリンクの表現には下線を用いるほうがよいのではないかと思います(逆に言えば、リンクがはられていないテキストに下線は用いるべきではありません)。リンクをマウスオーバーした時などフォーカスがあてられた時だけ下線が表示されるウェブサイトもありますが、フォーカスをあてない限り、リンクの存在を色の違いだけで表現していることに変わりありません。以上する方法を紹介していますが、同文書でも「この達成基準を満たすために十分であるが、リンクテキストを区別するには、好ましい実装方法ではない」としており、あまり望ましいものではありません。実装方法集リンクテキストの適切な色は?リンクテキストの色とその他の周辺のテキストの色の違いを識別できるようにすることは当然ですが、それぞれの色が背景色との違いを識別できるようにする必要がありますので、以下のコントラスト比を考慮して色を選択する必要があります。リンクテキストの色と背景色のコントラスト比リンクテキスト周辺のテキストの色と背景色のコントラスト比リンクテキストの色とその周辺のテキストの色のコントラスト比1と2は、WCAG2.0の以下の要件が参考になります(達成基準AA以上の準拠を目指すなら参照しなくてはならない)。日本語で太字ではない22ポイント未満のテキストであれば、1.4.3の要件に従うなら4.5:1以上のコントラスト比、1.4.6の要件に従うなら7:1以上のコントラスト比が必要です。3のリンクテキストとその他のテキストの色のコントラスト比は、WCAG2.0の中で特に指定されていないようですが、1と2のコントラスト比を考慮した上でそれぞれのテキストの色の違いが識別できるコントラスト比が必要です。以上にすべしとあるのは、1つの参考になるかと思います。コントラスト比については、以下のようなツールが存在します。色の使用」でしょうか。X8341-3:2010では7.1.4.1)情報を伝える、何が起こるか又は何が起きたかを示す、ユーザの反応を促す、もしくは視覚的な要素を区別する唯一の視覚的な手段として、色だけを使用しない。この達成基準は、特に色の知覚に関するものである。1.3で網羅されている。十分なコントラスト」も関係してきます。以下の要件はテキストと背景色のコントラストの要件ですのでご注意ください。コントラスト比をもたせる。コントラスト比がある。テキスト又は画像化された文字において、次の場合はコントラストの要件は該当しない。アクティブではないユーザインタフェース・コンポーネントの一部である、装飾だけを目的にしている、誰も視覚的に確認できない、又は重要な他の視覚的なコンテンツを含む写真の一部分である。ロゴ又はブランド名の一部である文字には、コントラストの要件はない。コントラスト比がある。コントラスト比がある。テキスト又は画像化された文字において、次の場合はコントラストの要件は該当しない。アクティブではないユーザインタフェース・コンポーネントの一部である、装飾だけを目的にしている、誰も視覚的に確認できない、又は重要な他の視覚的なコンテンツを含む写真の一部分である。ロゴ又はブランド名の一部である文字には、コントラストの要件はない。代替テキストアクセシビリティに配慮した代替テキストの話ウェブコンテンツで「非テキストコンテンツと同等の目的を果たす代替テキスト」を提供しなくてもよいものアクセシビリティに配慮した顔文字、ASCIIアートの代替テキストの提供リンクのはり方リンク先を別ウィンドウ(タブ)で表示させることはアクセシビリティ上どうなのか。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。