Skip to content

テクニック C41:コンポーネント内に堅固なフォーカスインジケータを作成する

このテクニックについて

このテクニックは 2.4.13: フォーカスの外観 (十分なテクニック) に関連する。

このテクニックは CSS に適用される。

解説

このテクニックの目的は、コンポーネント内部の背景色に対して十分なコントラストを持つ、視認性の高いフォーカスインジケータを作成することである。

事例

事例では、青い背景にフォーカススタイルを適用するシンプルな実装を示している。インジケータがコンポーネントの内側に含まれているため、コンポーネントがどのような背景に配置されていてもコントラストが維持される。

事例 1: 内部のボーダー

HTML

<button type="button">Example button</button>

CSS

インジケータを提供するCSS。main 要素内のボタンだけに範囲を絞り込む。

button { 
  background-color: #236AB8; /* medium-dark blue */
  color: white;
  padding: 10px;
}

main button:focus { 
  outline: 3px #fff5be solid; /* light yellow */
  outline-offset: -4px;
}
暗いボーダーの付いた三つの青いボタン。中央のボタンの内側には明るい黄色のボーダーが表示されている。
ボタンのデフォルト状態及びフォーカス状態。

関連リソース

推奨を意味するものではない。

検証

手順

それぞれのフォーカス可能なユーザインターフェース コンポーネントに対して:

  1. キーボードを使用して、ページ上のフォーカス可能な各ユーザインタフェース要素にキーボードフォーカスを当てる。
  2. フォーカスインジケータ領域が、コンポーネントの周囲の 2 CSS ピクセル以上のボーダーであることをチェックする。
  3. 最小のフォーカスインジケータ領域に対して、フォーカス状態と非フォーカス状態との間のインジケータのコントラストの変化が 4.5:1 の比率であることをチェックする。

期待される結果

  • 2 及び 3 が真である。

Focus Appearance (Minimum) に必要なコントラストの変化は 3:1 であるが、このテクニックは最小要件をわずかに超えている。

訳注

Focus Appearance (Minimum) は WCAG 2.2 の草案段階で存在した達成基準であり、現在はフォーカスの外観にリネームされている。

Back to Top