WCAG 2.2 ガイドライン「2.4.3 フォーカスの順序」Level A について
はじめに
WCAG 2.2の「2.4.3 フォーカスの順序」は、ウェブページが順序通りに操作可能であり、その順序が意味や操作性を保つことを求めています。これにより、キーボードやスクリーンリーダーを使用しているユーザーが、ページ内の要素を効率的に操作できるようになります。
1. 基準の概要
要件
- フォーカス可能なコンポーネント（例: ボタン、リンク、フォーム要素など）は、ページ内の意味や操作性を保つ順序でフォーカスを受け取る。
- フォーカスの順序が、視覚的な並びや内容の流れに一致する。
2. 実装方法
a. DOM（ドキュメントオブジェクトモデル）の順序を視覚的な順序と一致させる
適切なHTML構造を使用
HTML
<header>
<nav>
<ul>
<li><a href="#home">ホーム</a></li>
<li><a href="#about">会社概要</a></li>
<li><a href="#contact">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h1>ホーム</h1>
<p>ようこそ！</p>
</section>
<section id="about">
<h1>会社概要</h1>
<p>私たちについて。</p>
</section>
<section id="contact">
<h1>お問い合わせ</h1>
<form>
<label for="name">お名前:</label>
<input type="text" id="name">
<button type="submit">送信</button>
</form>
</section>
</main>
この例では、フォーカスの順序がHTMLの流れに従っており、視覚的な順序と一致しています。
b. tabindexを正しく使用する
自然なフォーカス順序を優先
tabindexを使用する場合、以下のルールを守ります：
- 0: 自然な順序に従う。
- 正の値: 特定の順序を指定するが、乱用は避ける。
HTML
<div>
<button tabindex="1">優先ボタン</button>
<button tabindex="0">通常のボタン</button>
<button tabindex="-1">非フォーカスボタン</button>
</div>
注意点
tabindexの正の値を多用すると、管理が複雑になり、フォーカスの順序が不自然になるリスクがあります。
c. モーダルダイアログでのフォーカス制御
モーダルダイアログを使用する場合、フォーカスを適切に管理してユーザーが混乱しないようにします。
モーダルの実装例
HTML
<button id="openModal">モーダルを開く</button>
<dialog id="modal" aria-labelledby="modalTitle">
<h2 id="modalTitle">モーダルタイトル</h2>
<p>これはモーダルです。</p>
<button id="closeModal">閉じる</button>
</dialog>
JavaScript
const modal = document.getElementById('modal');
const openModal = document.getElementById('openModal');
const closeModal = document.getElementById('closeModal');
openModal.addEventListener('click', () => {
modal.showModal();
closeModal.focus(); // モーダル内の要素にフォーカスを移動
});
closeModal.addEventListener('click', () => {
modal.close();
openModal.focus(); // 元のボタンにフォーカスを戻す
});
d. フォーカスを動的に調整
動的に生成されるコンテンツの場合、フォーカスが正しい順序で動くようにします。
例: JavaScriptで新しい要素を挿入
JavaScript
const button = document.createElement('button');
button.textContent = '新しいボタン';
document.body.appendChild(button);
button.focus(); // 新しい要素にフォーカスを設定
3. よくある失敗例とその改善策
a. 視覚的な順序とフォーカス順序が一致しない
失敗例
<div>
<button>ボタン2</button>
<button>ボタン1</button> <!-- 視覚的には2番目だが、フォーカスは先に来る -->
</div>
改善策
- HTML構造を視覚的な順序に合わせる。
b. tabindexの乱用
失敗例
<button tabindex="3">ボタン3</button>
<button tabindex="1">ボタン1</button>
<button tabindex="2">ボタン2</button>
改善策
- フォーカス順序を自然に保つため、
tabindex="0"を使用。
4. アクセシビリティのメリット
a. ユーザー操作性の向上
- フォーカスの順序が直感的であれば、キーボードユーザーが効率的に操作できます。
b. 誤操作の防止
- フォーカスが不適切な順序で移動しないため、ユーザーが意図しない操作をするリスクが軽減されます。
c. スクリーンリーダー利用者への配慮
- 順序が論理的であれば、スクリーンリーダーユーザーが内容を正確に理解できます。
5. テスト方法
a. 手動テスト
- Tabキーを使用してフォーカスの移動順序を確認。
- 視覚的な順序と一致しているかチェック。
b. スクリーンリーダーを使用したテスト
- スクリーンリーダーでフォーカス順序を確認し、内容が適切に読み上げられるか確認。
c. 自動テストツール
- AxeやWAVEを使用して、フォーカス順序が適切であるか確認。
まとめ
WCAG 2.2の「2.4.3 フォーカスの順序」は、ページ内のフォーカス可能な要素が論理的で直感的な順序に従うことを求めています。
実装ポイント
- HTMLの構造を視覚的な順序に一致させる。
tabindexを正しく使用し、不自然なフォーカス順序を避ける。- モーダルや動的なコンテンツでフォーカス管理を徹底する。
これにより、すべてのユーザーが効率的で快適にウェブコンテンツを操作できる環境を構築できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。