WCAG 2.2 ガイドライン「2.4.13 フォーカスの外観」Level AAA について
はじめに
WCAG 2.2の「2.4.13 フォーカスの外観」は、キーボード操作時に表示されるフォーカスインジケーターが十分に目立ち、視覚的に確認できることを求めています。この基準は、特に視覚障害や低視力のユーザーが、現在フォーカスしている要素を正確に認識できるようにすることを目的としています。
1. 基準の概要
要件
フォーカスインジケーターの一部が以下の条件を満たしている必要があります：
- フォーカスインジケーターが明確に見える。
- コントラスト比が十分である。
- インジケーターのサイズが十分である。
- インジケーターが視覚的に隠れない。
2. 実装方法
a. CSSを使用して視認性の高いフォーカススタイルを設定する
例: シンプルで目立つフォーカスインジケーター
CSS
button:focus, a:focus {
outline: 3px solid #005fcc; /* 明るい青で目立つ枠線 */
outline-offset: 2px; /* 要素から少し離れた位置に枠線を描画 */
}
- 太さを3px以上に設定し、視覚的に目立つようにします。
outline-offsetを使用して、要素との区別を明確にします。
b. コントラストの確保
フォーカスインジケーターと背景のコントラスト比は、少なくとも 3:1 を確保する必要があります。
例: 十分なコントラストを持つフォーカスインジケーター
CSS
input:focus {
border: 3px solid #FFD700; /* 金色で高コントラスト */
}
c. 二色のフォーカスインジケーターを使用する
フォーカスインジケーターに二色を使用すると、背景や要素の色に関係なく、視認性が高まります。
例: 二色のフォーカスインジケーター
CSS
button:focus {
box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px #005fcc; /* 内側に白、外側に青の二重の影 */
}
- 内側の色と外側の色を組み合わせてコントラストを確保します。
d. インジケーターのサイズを確保
フォーカスインジケーターが小さすぎないようにします。例えば、インジケーターが要素の周囲を少なくとも2px以上囲むことを保証します。
e. ユーザーがカスタマイズできる仕組みを提供する
フォーカスインジケーターの色や太さをユーザーが変更できるようにします。
例: カスタマイズオプション
HTML
<div>
<label for="color">フォーカスカラー:</label>
<input type="color" id="color" value="#005fcc">
</div>
JavaScript
const input = document.getElementById('color');
input.addEventListener('change', (e) => {
document.documentElement.style.setProperty('--focus-color', e.target.value);
});
CSS
button:focus {
outline: 3px solid var(--focus-color, #005fcc);
}
3. よくある失敗例とその改善策
a. フォーカスインジケーターが小さい
失敗例
button:focus {
outline: 1px solid gray;
}
問題点
- 線が細く、背景に溶け込んでしまう。
改善策
button:focus {
outline: 3px solid #005fcc;
}
b. コントラスト不足
失敗例
button:focus {
outline: 2px solid lightgray;
}
問題点
- フォーカスインジケーターと背景のコントラストが不足している。
改善策
button:focus {
outline: 2px solid #FF0000; /* 赤色で十分なコントラストを確保 */
}
4. アクセシビリティのメリット
a. ユーザー体験の向上
- フォーカスされた要素が明確に見えることで、ユーザーは操作中の位置を簡単に把握できます。
b. キーボードユーザーへの配慮
- キーボードナビゲーションを使用するユーザーが操作中の要素を見失うことがなくなります。
c. ユーザーの多様なニーズへの対応
- 高コントラストやカスタマイズ可能なフォーカスインジケーターは、視覚障害や色覚異常のあるユーザーにも配慮しています。
5. テスト方法
a. 手動テスト
- キーボード（Tabキー）を使用してフォーカスを移動。
- フォーカスインジケーターが十分に目立ち、見やすいか確認。
b. コントラストテスト
- コントラスト比を確認するツール（例: Contrast Checker）を使用して、背景とのコントラストをチェック。
c. 自動テストツール
- AxeやWAVEなどのツールを使用して、フォーカスインジケーターの適切性を検証。
まとめ
WCAG 2.2の「2.4.13 フォーカスの外観」は、視認性の高いフォーカスインジケーターを提供することで、すべてのユーザーが現在の操作位置を明確に把握できるようにすることを目的としています。
実装ポイント
- CSSを使用して太さ3px以上の視認性の高いフォーカスインジケーターを作成する。
- 背景とのコントラストを3:1以上に設定する。
- 二色のフォーカスインジケーターやカスタマイズオプションを提供する。
これにより、キーボードユーザーや視覚に課題のあるユーザーにも優しいウェブサイトを構築できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。