G183: 色が単独でリンク又はコントロールを特定する場所で、周囲のテキストと一緒に 3:1 のコントラスト比を使用し、そのリンク又はコントロールのフォーカスに追加の視覚的な手がかりを提供する | クズリーマンのカス備忘録

G183: 色が単独でリンク又はコントロールを特定する場所で、周囲のテキストと一緒に 3:1 のコントラスト比を使用し、そのリンク又はコントロールのフォーカスに追加の視覚的な手がかりを提供する

accessibility-logo Webアクセシビリティ
スポンサーリンク

 

 

G183: 色が単独でリンク又はコントロールを特定する場所で、周囲のテキストと一緒に 3:1 のコントラスト比を使用し、そのリンク又はコントロールのフォーカスに追加の視覚的な手がかりを提供する

について。

 

ここで言っている「コントラスト」は、周囲のテキストとリンク文字のコントラスト!

「3:1 のコントラスト比」

って言葉が出てくるが、これは、文字色と背景色のコントラスト比ではない

 

リンク文字(など)と、周囲の文字色とのコントラスト比

以下のとおり。

注記 1: この達成方法は輝度に加えて色の使用に関するものである。この達成方法では、コントラスト比はリンクとその周囲の語句とのコントラストについて言及している。達成基準 1.4.3 と 1.4.6 では、コントラスト比は単語とその背景とのコントラストについて言及している。この違いは、達成基準 1.4.3 と 1.4.6 に使用されるコントラスト比は、異なる色覚及び視覚障害のための、テキストとその背景の可読性に関するものであるが、この達成方法は利用者がテキストの異なる部分の違い (明らかな違い) を識別する能力に関するものだからである。

G183: 色が単独でリンク又はコントロールを特定する場所で、周囲のテキストと一緒に 3:1 のコントラスト比を使用し、そのリンク又はコントロールのフォーカスに追加の視覚的な手がかりを提供する | WCAG 2.0 達成方法集

 

適用基準

リンクテキストがあれば大概は適用になるかと。

こういう感じで通常のテキストの中にリンクテキストが混ざってるものがあれば適用。

 

解説の最初の段落だけをすべて読むと、以下の様にあり、マウスオーバーで状態の変化を起こさない場合は適用外か?と一瞬思ってしまう。

この達成方法は、色の違いを知覚することが困難である、又はロービジョンである利用者がそれらを見分けることができるよう、カーソルを重ねたりフォーカスが当たったときに、手がかりを補足する方法を説明している。

が、

注記2を見ると、色にも言及されているため、適用だと判断できる。

注記 2: コンテンツ制作者がこの達成方法の色の部分を使用したい (すなわち、互いに十分なコントラストが確保されている異なる色を語句に使用する) と望んでいて、かつ、コンテンツ制作者が達成基準 1.4.3 にも適合したい (それぞれの語句と背景とのコントラストを確保する) 場合、以下で挙げる色を用いることができる。(例えば、白い背景の段落内で黒いテキストを使い、リンクは以下の事例 1 にある色のいずれかで表現する)。

 

 

グローバルメニューなど、独立しているリンクは対象外

F73失敗例にも以下の記述がある。

ナビゲーションリンクなど、いくつかのリンクは、ページデザインや文脈から視覚的に明らかであるが

F73: 達成基準 1.4.1 の失敗例 - 色覚なしで視覚的にはっきりと分からないリンクを作成する | WCAG 2.0 達成方法集

 

 

適合

マウスオーバーしたときに、リンクテキストの下線が変化させなきゃ不適合?。。。いや、適合だ!

手順では、3番目に以下の記述が在る。

  1. リンクへのポインティング (マウスオーバー) が、視覚的に強調 (アンダーラインやフォントの変更など) を引き起こすことを確認する。

G183: 色が単独でリンク又はコントロールを特定する場所で、周囲のテキストと一緒に 3:1 のコントラスト比を使用し、そのリンク又はコントロールのフォーカスに追加の視覚的な手がかりを提供する | WCAG 2.0 達成方法集

 

このWCAGのページでも、リンクテキストにマウスオーバーすると、リンクテキストのアンダーラインが強調される(状態が変化する)のがわかると思う。

 

しかし、注記3には以下の記述がある。

注記 3: もしある時点でのすべての支援技術又はウェブブラウザが、利用者のためにウェブページのすべてのリンクにアンダーラインを引く選択肢を提供するなら、これは、コンテンツ制作者によって提供されたリンクをハイライトするメカニズムの代わりに使用することができる。

ほとんどのウェブブラウザにおいて、全てのリンク(cssでアンダーラインが消えるカスタマイズをしていなければ)にアンダーラインが引かれているはず。

であればそのままでいいはず。

 

これはかなり微妙。

 

しかし、本達成方法の主旨を考えてみると、

、テキストの色の違いを識別することができない利用者に対して、

色覚にハンデが在る方でも、同様にリンクが認識できればいいわけだから、マウスオーバーで変化がないとしても、最初からアンダーラインが引かれている場合であれば(そのページにリンクが多すぎなければ)適合ということになると思う。

 

また、失敗例F73を見ても、最初から下線がない場合で、フォーカス時にも下線が出るなどしない場合を失敗例としているため、裏を返すと、最初から下線がある場合は適合と捉えられる。

次のコードは、文章内又は段落内のリンクから下線を取り除いていて、なおかつ色以外に別の視覚的な手掛かりを提供していない例である。

 

 

加えて、Webアクセシビリティの号令を掛けている総務省も、リンクテキストにマウスオーバーで変化を加えるということはしていない。

総務省はWebアクセシビリティ守れてるかと言われると微妙な所あるけど。。。

 

もちろん、マウスオーバーで、アンダーラインが強調される、や、フォントが変化するなどの変化があるのがより良い。

 

 

コメント

タイトルとURLをコピーしました