WCAG 2.2 ガイドライン「2.4.7 フォーカスの可視性」Level AA について
はじめに
WCAG 2.2の「2.4.7 フォーカスの可視性」は、キーボード操作が可能なユーザーインターフェースのすべての要素がフォーカスを受け取った際、そのフォーカスが視覚的に確認できることを求めています。この基準は、特にキーボードを使うユーザーや視覚障害のあるユーザーが、どの要素にフォーカスがあるのかを簡単に確認できるようにするためのものです。
1. 基準の概要
要件
- キーボード操作が可能なインターフェースは、フォーカスインジケーターが視覚的にわかるようにする。
- デフォルトのフォーカススタイルが消えたり、不明瞭にならないようにする。
2. 実装方法
a. CSSでフォーカスインジケーターを設定する
基本的なフォーカススタイルの設定
CSS
button:focus, a:focus {
outline: 2px solid blue; /* フォーカス時に青色の枠線を表示 */
outline-offset: 2px; /* 枠線を要素から少し離す */
}
- このコードでは、フォーカスされたボタンやリンクが明確に見えるようになります。
b. カスタムフォーカススタイルを提供する
デフォルトのフォーカススタイルを上書きしても、インジケーターが明確で十分なコントラストを持つようにします。
例: 背景色を変えるフォーカススタイル
CSS
input:focus {
background-color: lightyellow; /* 背景色を変更 */
border: 2px solid green; /* 枠線を追加 */
}
- 背景色や枠線を変更することで、ユーザーに視覚的な変化をわかりやすく伝えます。
c. スクリプトでフォーカススタイルを動的に変更する
JavaScriptを使用して、フォーカス要素のスタイルを動的にカスタマイズします。
例: スクリプトを使ったフォーカススタイル変更
HTML
<button id="customButton">フォーカスしてみてください</button>
JavaScript
const button = document.getElementById('customButton');
button.addEventListener('focus', () => {
button.style.border = '3px dashed orange';
});
button.addEventListener('blur', () => {
button.style.border = '';
});
- フォーカス時に枠線を変化させることで、視覚的に認識しやすくします。
d. デフォルトのフォーカススタイルを尊重する
特定のデバイスやブラウザでは、デフォルトのフォーカスインジケーターが最適に設計されています。そのまま利用することが推奨される場合もあります。
例: デフォルトのフォーカススタイルを使用
特別なスタイルを指定しないことで、ブラウザやOSのデフォルトのスタイルを利用できます。
CSS
button:focus {
outline: auto; /* ブラウザデフォルトのフォーカススタイルを使用 */
}
3. よくある失敗例とその改善策
a. フォーカスが非表示または不明瞭
失敗例
button:focus {
outline: none; /* フォーカススタイルを完全に削除 */
}
改善策
- フォーカススタイルを完全に削除せず、目立つインジケーターを提供します。
button:focus {
outline: 2px solid #00f; /* 明確な枠線を追加 */
}
b. コントラスト不足
失敗例
button:focus {
outline: 1px solid lightgray; /* 見えにくい色 */
}
改善策
- 十分なコントラストを持つ色を選択します。
button:focus {
outline: 2px solid #000; /* 黒色で高コントラスト */
}
4. アクセシビリティのメリット
a. キーボードユーザーへの配慮
- フォーカスが明確に見えることで、キーボード操作で現在の位置が一目でわかります。
b. 視覚障害者へのサポート
- フォーカスの位置を明示することで、視覚的な手がかりが得られます。
c. スムーズなナビゲーション
- フォーカスが視認できると、ユーザーはストレスなく操作できます。
5. テスト方法
a. 手動テスト
- キーボード（Tabキー）を使って、フォーカスがすべてのインタラクティブ要素に移動するか確認。
- フォーカスの視覚的なインジケーターが適切かチェック。
b. 自動テストツール
- AxeやWAVEなどのツールを使って、フォーカスインジケーターが正しく実装されているか検証。
c. カラービジュアルチェッカー
- フォーカススタイルが背景との間で十分なコントラストを持つか確認。
まとめ
WCAG 2.2の「2.4.7 フォーカスの可視性」は、キーボード操作でフォーカスが明確に視認できるようにすることを目的としています。
実装ポイント
- CSSでフォーカススタイルを明示的に設定する。
- 十分なコントラストを確保し、見えやすいスタイルを採用する。
- デフォルトのフォーカススタイルを削除せず、必要に応じてカスタマイズする。
これにより、すべてのユーザーが操作しやすいウェブサイトを構築できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。