Skip to content

テクニック G223:コンテンツ制作者が提供した視認性の高いフォーカスインジケータを用いる

このテクニックについて

このテクニックはどの解説書からも参照されていない。

このテクニックは全ての技術に適用される。

解説

このテクニックの目的は、コンテンツ内に視認性の高いフォーカスインジケータを作成することによって、ブラウザのフォーカスインジケータを強調することである。このテクニックは G195 と非常に似ているが、フォーカスの外観を満たすために、より目立つインジケータを備えている。

事例

事例 2: フォーム要素

テーブルの中にフォームが書かれているウェブページがある。テーブルとフォームの要素の両方の境界は細くて黒い線になっている。フォーカスがフォーム要素に当たる時、その要素は部分的に透明になっている 5 ピクセルの赤い線で囲まれる。この赤は 16 進数で #CA0000 の色に相当し、白い背景とのコントラスト比は 6:1 である。

事例 3: メニュー

サブメニューを持ったインタラクティブなメニューを含んだウェブページがある。利用者は矢印キーを使ってメニューの中でフォーカスを動かすことができる。フォーカスが動くと、フォーカスが当たっているメニュー項目の背景が異なる色に変わり、その色は周りの項目に対して 15:1 のコントラスト比になる (テキストのコントラストは維持される)。

検証

手順

ページ上でキーボードフォーカスを受け取るべき各ユーザインターフェース コンポーネントについて:

  1. そのコンポーネントにナビゲートして、他のコンテンツに隠されていない可視のフォーカスインジケータがあることをチェックする。
  2. フォーカスインジケータ領域が、コンポーネントを囲む 1 CSS px のボーダーの少なくとも 2 倍のサイズであるかどうかをチェックする。
  3. フォーカスインジケータ領域の最小領域において、フォーカス状態と非フォーカス状態との間のインジケータのコントラストの変化が 4.5:1 以上の比率であるかどうかをチェックする。

期待される結果

  • 全てのチェックが真である。
Back to Top