概要

バージョン： WCAG 2.2以上
セクション番号： 2.4.13
レベル： AAA
適用対象：
  • ボタン
  • コントロール
  • 入力
要件：

キーボードのフォーカス インジケーターが表示されている場合は、次のいずれかまたは両方が当てはまる。

  1. フォーカス インジケーター全体が、次の全てを満たす。

    • フォーカスされているユーザーインターフェースコンポーネントまたはサブコンポーネントを囲む。かつ、
    • フォーカスされている状態とフォーカスされていない状態との間で、同一ピクセルに少なくとも 3:1 のコントラスト比がある。かつ、
    • 隣接する非フォーカスインジケーター色とのコントラスト比が少なくとも 3:1 であること。

  2. フォーカス インジケーターの領域は、次の全てを満たす。

    • フォーカスされていないコンポーネントまたはサブコンポーネントの 1 CSS ピクセル幅の周囲の領域と少なくとも同じ大きさであるか、またはフォーカスされていないコンポーネントまたはサブコンポーネントの最小境界ボックスの最短辺に沿った 4 CSS ピクセル幅の線と少なくとも同じ大きさである。かつ、
    • フォーカスされている状態とフォーカスされていない状態との間で、同一ピクセルに少なくとも 3:1 のコントラスト比がある。かつ、
    • 隣接する非フォーカスインジケーター色に対して少なくとも 3:1 のコントラスト比であるか、2 CSS ピクセルより薄くないこと。

例外：

  • フォーカスインジケータがユーザエージェントによって決定され、かつコンテンツ製作者が調整できない場合。又は、
  • コンテンツ製作者がフォーカスインジケータ及びそのインジケータの背景色を変更していない場合。
ガイダンス：
達成方法： WCAG 2.2の達成基準に対応する達成方法はまだ利用できません。

目的

この達成基準の目的は、キーボード フォーカス インジケーターがアクティブなユーザー インターフェイス コンポーネントをしっかりと囲み、ユーザーが明確に識別できるようにすることです。

この達成基準は、フォーカス インジケーターが必要であることを要求している2.4.7に似ていますが、フォーカス インジケーター自体の要件を設定しています。

要件の満たし方

カスタム キーボード フォーカス インジケーターは、要素がフォーカスを受けたとき（つまり、タブで移動したとき）に、コンテンツ製作者が要素のスタイルを変更すると作成されます。スタイルは通常、CSS focusセレクターに関連付けられます。

この達成基準を満たす最も直接的な方法は、インジケーターがアクティブなユーザー インターフェイス コンポーネントを完全に囲んで、インジケーターが描画されるピクセルとその両側のピクセルとこコントラス比が 3:1 になるようにすることです。さらに、インジケーターは実線でなければなりません（例：破線や点線ではありません。）

コンポーネントを実線のアウトラインで完全に囲むことができない場合は、コンテンツ製作者は、インジケータが二番目の要件で表現されている長さと太さの要件を満たす必要があります。この要件をさまざまな種類のインジケータに適用する方法の詳細については、understanding documentを参照してください。

この達成基準は、ユーザーエージェントによって実装されたフォーカスインジケーターには適用されないことに注意してください。

追加情報

ナレッジベースの次のページでは、出版物コンテンツにおいてこの達成基準を満たす方法が、より詳しく記載されています。