サイトアイコン IT & ライフハックブログ｜学びと実践のためのアイデア集

WCAG 2.2「2.4.13 フォーカスの外観」Level AAAとは？要件、CSS実装、テスト方法

greeden
person eye

Photo by Victor Freitas on Pexels.com

フォーカスインジケーターとは、キーボード操作の対象になっているリンク、ボタン、入力欄などを示す枠線や色の変化です。
マウスポインターを使わない利用者は、この表示を手掛かりに現在の操作位置を把握します。
WCAG 2.2の達成基準2.4.13「フォーカスの外観」（Level AAA）は、フォーカスインジケーターが存在するだけでなく、見つけやすい面積とコントラストを備えることを求めています。

W3Cの達成基準2.4.13を実装へ落とし込むときに迷いやすい点を、CSS例と確認手順に分けて説明します。
先に結論を示すと、判定の中心は「フォーカス表示の面積」と「フォーカス前後の見た目の変化」です。

達成基準2.4.13が求める二つの条件

キーボードフォーカスが見えるとき、フォーカスインジケーターの一部は次の二条件をともに満たす必要があります。

  1. サイズ：フォーカスされていないコンポーネントまたはサブコンポーネントを、2 CSSピクセルの太さで囲んだ外周と同等以上の面積がある。
  2. 変化のコントラスト：フォーカスがある状態とない状態の同じ画素を比べたとき、3:1以上のコントラスト比がある。

一つ目は、枠線を必ず2pxにするという意味ではありません。
基準が定めているのは表示領域の最小面積です。
コンポーネントの外周に沿った2pxの実線は、この面積を満たしやすい実装例です。

二つ目の3:1は、フォーカスインジケーターの色と背景色だけを比べる条件ではありません。
同じ位置の画素が、フォーカス前後でどれだけ変化したかを比べます。
色名や線の太さだけで適合を判断せず、実際の配色と状態を使って確認します。

なお、ブラウザなどのユーザーエージェントが決める表示を作成者が調整できない場合、またはフォーカスインジケーターとその背景色を作成者が変更していない場合には例外があります。

関連する達成基準との違い

フォーカスに関する要件は一つではありません。
次の表のように判定対象を分けると、実装とテストの混同を防げます。

達成基準 適合レベル 確認すること
2.4.7 フォーカスの可視性 AA キーボードフォーカスを視覚的に確認できる操作方法があるか
2.4.13 フォーカスの外観 AAA 表示されたインジケーターに十分な面積と状態変化のコントラストがあるか
1.4.11 非テキストのコントラスト AA フォーカス状態のインジケーターと隣接色を識別できるか
2.4.11、2.4.12 フォーカスが隠れない AA、AAA 固定ヘッダーなどの作成者が配置したコンテンツで、フォーカス対象が隠れていないか

2.4.13は、フォーカス表示の存在そのものを定める基準ではありません。
表示の有無は、達成基準2.4.7「フォーカスの可視性」の解説とあわせて確認してください。

一方、「インジケーターが見えにくい」と「フォーカス対象が別のコンテンツに隠れる」は異なる問題です。
後者は、達成基準2.4.12「フォーカスが隠れない（強化）」の解説で扱う判定です。

二種類のコントラストを分けて確認する

フォーカス表示では、状態変化のコントラストと隣接色とのコントラストを別々に確認します。

たとえば、フォーカス前後の色が似ていれば、背景から線を識別できても状態変化の条件を満たさない可能性があります。
反対に、フォーカス前後で大きく変化しても、表示された線が周囲の背景に溶け込めば、非テキストのコントラストに関する確認が必要です。

CSSによる実装例

外周に単色のアウトラインを表示する

:focus-visibleを使うと、主にキーボード操作でフォーカス表示が必要な場面へスタイルを適用できます。

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

outline-offsetで要素との間に余白を設けると、既存の境界線と重なりにくくなります。
ただし、例の青色があらゆる背景で条件を満たすわけではありません。
サイトで使う背景色、コンポーネントの色、フォーカス前の状態を組み合わせて検証します。

二色のインジケーターを使う

背景色が場所によって変わる画面では、明るい線と暗い線を重ねる方法があります。

:focus-visible {
  outline: 2px solid #f9f9f9;
  outline-offset: 0;
  box-shadow: 0 0 0 4px #193146;
}

二色にすれば無条件に適合するわけではありません。
各線の面積、フォーカス前後の変化、線同士と背景とのコントラストを実際の画面で確認します。

box-shadowだけに依存すると、強制カラーモードで表示されない場合があります。
ブラウザ標準のアウトラインを代替なしで消さず、アウトラインを残した実装にします。

よくある失敗と修正方針

代替表示なしでアウトラインを消す

button:focus {
  outline: none;
}

この指定は、ブラウザが用意したフォーカス表示を消します。
デザイン上の理由で標準表示を置き換える場合も、同じフォーカス状態に対して、十分に見える代替インジケーターを用意します。

色名だけで高コントラストと判断する

「赤」「金色」「濃い青」といった色名だけでは、コントラストを判定できません。
同じ色でも、隣接する背景やフォーカス前の色が変われば結果も変わるためです。
対象画面の色値を使って比率を確認します。

太さだけを確認する

3pxの線を指定しても、必要な領域が表示されるとは限りません。
別の要素に切り取られている場合や、コンポーネントの内側へ深く入り込んだ表示では、外周2 CSSピクセル相当の面積を満たすかを個別に判断します。

一つの背景と一つの部品だけで試験する

同じスタイルでも、カード、ダイアログ、固定ナビゲーション、画像やグラデーションの近くでは見え方が変わります。
使われる背景と状態を洗い出し、フォーカス可能な部品ごとに確認します。

手動テストの手順

  1. 対象を洗い出す：リンク、ボタン、入力欄、メニュー項目、ダイアログ内の操作部品など、キーボードフォーカスを受け取る要素を列挙する。
  2. キーボードで移動する：TabキーとShift＋Tabキーを使い、複合コンポーネントでは必要に応じて矢印キーも使って移動する。
  3. 表示の有無を確認する：各要素でフォーカス位置を視覚的に識別できるかを見る。
  4. 面積を確認する：インジケーターの領域が、フォーカス前のコンポーネントを2 CSSピクセルの太さで囲んだ外周と同等以上かを確認する。
  5. 状態変化を測る：フォーカス前後の同じ画素を比較し、必要な領域で3:1以上のコントラスト比があるかを確認する。
  6. 隣接色を確認する：フォーカス状態のインジケーターが、内側と外側の隣接色から識別できるかを確認する。
  7. 重なりを別に確認する：固定ヘッダー、通知、ダイアログなどでフォーカス対象が隠れていないかを、2.4.11と2.4.12の観点で確認する。
  8. 表示条件を変える：ページ内で使われる背景、画面幅、拡大表示、強制カラーモードなど、見え方が変わる条件でも試す。

自動チェックツールは、関連するCSSや一部のコントラスト問題を探す補助になります。
一方、キーボードでの移動、フォーカス前後の画素、背景の違い、要素の重なりは、実際の画面を使った確認が欠かせません。

実装と検証で押さえる要点

当社では、ウェブアクセシビリティを導入しやすくするUUU ウェブアクセシビリティを提供しています。
アクセシビリティ改善に取り組む際は、サービスの詳細もご覧ください。

モバイルバージョンを終了