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

WCAG 2.2 ガイドライン「2.4.12 フォーカスが隠れない（強化）」Level AAA について

greeden
person holding camera with red lights on lens

Photo by Lisa Fotios on Pexels.com

WCAG 2.2 ガイドライン「2.4.12 フォーカスが隠れない（強化）」Level AAA について

はじめに

WCAG 2.2の「2.4.12 フォーカスが隠れない（強化）」は、キーボードで操作中にフォーカスされた要素の一部も隠れないようにすることを求めています。この基準は、フォーカスされた要素が視覚的に完全に表示され、操作中の要素が明確に認識できることを目的としています。

1. 基準の概要

要件

  • キーボードで操作中に、フォーカスされた要素が開発者が作成したコンテンツ（ヘッダー、フッター、ポップアップなど）によって一部も隠れない。
  • フォーカスされた要素全体が常に画面上で完全に表示される。

注意点

  • 固定ヘッダーやフッター、ポップアップ広告などがフォーカスされた要素を部分的に覆う場合、この基準を満たしていないと見なされます。

2. 実装方法

a. CSSのscroll-paddingを使用する

scroll-paddingプロパティを使用して、スクロール時にフォーカスされた要素が隠れないよう余白を確保します。

例: 固定ヘッダーに対応したスクロール調整

CSS

html {
  scroll-padding-top: 60px; /* 固定ヘッダーの高さ分を確保 */
  scroll-padding-bottom: 20px; /* 固定フッターの高さ分を確保 */
}

b. JavaScriptでフォーカス位置を動的に調整する

scrollIntoViewメソッドを使用して、フォーカスされた要素が完全に表示されるようにスクロールを調整します。

例: JavaScriptでスクロール位置を調整

JavaScript

document.querySelectorAll('a, button, input, textarea').forEach(element => {
  element.addEventListener('focus', () => {
    element.scrollIntoView({ block: 'center', inline: 'nearest' });
  });
});
  • このコードにより、フォーカスされた要素が常に画面の中央に表示されます。

c. 固定ヘッダーやフッターを避けるデザイン

固定ヘッダーやフッターがフォーカスを隠さないように、適切なマージンや余白を設定します。

例: 固定ヘッダーの高さに応じた余白を設定

CSS

header {
  position: fixed;
  top: 0;
  height: 60px;
  width: 100%;
  z-index: 1000;
}

main {
  margin-top: 60px; /* ヘッダーの高さ分を考慮 */
}

d. ポップアップやオーバーレイの表示調整

ポップアップやオーバーレイが表示された場合でも、フォーカスされた要素が完全に表示されるように工夫します。

例: ポップアップを適切に配置

CSS

.modal {
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  max-height: 80%;
  overflow: auto;
}

3. よくある失敗例とその改善策

a. 固定フッターがフォーカスを隠す

失敗例

  • 固定フッターによって、フォーカスされた要素の一部が隠れる。

改善策

  • scroll-padding-bottomを設定する。
  • 固定フッターの高さに応じてスクロール位置を調整するスクリプトを追加する。

b. ポップアップ広告がフォーカスを隠す

失敗例

  • フォーカスされた要素がポップアップ広告に部分的に覆われる。

改善策

  • ポップアップを画面の端に配置するか、フォーカス要素をポップアップ外に移動する。

4. アクセシビリティのメリット

a. 視覚的な手がかりの向上

  • フォーカスされた要素が完全に表示されることで、ユーザーが現在操作している要素を簡単に認識できます。

b. キーボードユーザーの操作性向上

  • キーボードで操作する際、視覚的に明確なフィードバックが得られ、ナビゲーションがスムーズになります。

c. すべてのデバイスでの一貫性

  • モバイルデバイスや小さい画面サイズでも、フォーカスが完全に表示される設計がユーザー体験を向上させます。

5. テスト方法

a. 手動テスト

  1. キーボード（Tabキー）を使用してフォーカスを移動。
  2. フォーカスされた要素が完全に見えるか確認。
  3. ポップアップや固定ヘッダーがフォーカスを隠していないか検証。

b. 自動テストツール

  • AxeやWAVEなどを使用して、フォーカス表示やスクロール位置の適切性を確認。

c. スクリーンリーダーテスト

  • スクリーンリーダーでフォーカスが正しく読み上げられ、視覚的に隠れていないことを確認。

まとめ

WCAG 2.2の「2.4.12 フォーカスが隠れない（強化）」は、キーボード操作でフォーカスされた要素が一部も隠れないようにすることを目的としています。

実装ポイント

  1. CSSのscroll-paddingを活用してスクロール位置を調整する。
  2. JavaScriptで動的にフォーカス位置を調整する。
  3. ポップアップや固定コンテンツがフォーカスを隠さないデザインを採用する。

これにより、すべてのユーザーが快適に操作できるウェブコンテンツを提供できます。

当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。

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