WCAG 2.2 ガイドライン「3.2.1 フォーカス時の動作」Level A について
はじめに
WCAG 2.2の「3.2.1 フォーカス時の動作」は、ユーザーインターフェースコンポーネントがフォーカスを受け取ったときに、文脈が自動的に変化しないことを求めています。この基準は、ユーザーが予期しない動作に混乱しないようにするために重要です。
1. 基準の概要
要件
- フォーカスを受け取ることだけで文脈の変更を引き起こしてはならない。
- 文脈の変更には以下が含まれます：
- ページ全体のリロード
- 新しいウィンドウやタブの自動的な開閉
- ユーザーの現在位置を変えるような大きな内容の変更
2. 実装方法
a. focusイベントを変更トリガーとして使用しない
フォーカス時に文脈が変更される代わりに、ユーザーの明示的な操作（クリックやEnterキーの押下）をトリガーとします。
例: 不適切なフォーカス時の変更
<select onchange="location.href=this.value;">
<option value="page1.html">ページ1</option>
<option value="page2.html">ページ2</option>
</select>
改善策
<select id="navigation">
<option value="page1.html">ページ1</option>
<option value="page2.html">ページ2</option>
</select>
<button onclick="changePage()">移動</button>
<script>
function changePage() {
const select = document.getElementById('navigation');
location.href = select.value;
}
</script>
b. 新しいウィンドウやタブを開く際に注意を促す
新しいウィンドウやタブを開く場合、ユーザーに明示的に通知します。
例: 新しいタブを開くリンク
<p><a href="example.html" target="_blank">新しいタブで開く（新しいウィンドウ）</a></p>
改善策
<p><a href="example.html" target="_blank">新しいタブで開く<span aria-label="（新しいタブで開きます）"></span></a></p>
c. activateイベントを使用する
「クリック」や「Enterキー押下」をトリガーとして使用します。
例: ボタンで文脈を変更
<button onclick="changeContext()">次のページへ</button>
<script>
function changeContext() {
window.location.href = "nextPage.html";
}
</script>
3. よくある失敗例とその改善策
a. フォーカス時にコンテンツが勝手に変更される
失敗例
<input type="text" onfocus="document.getElementById('message').innerText='フォーカスされました';">
<p id="message"></p>
改善策
- フォーカス時ではなく、明示的な操作をトリガーとする。
b. フォーカスが消える問題
失敗例
<input type="text" onfocus="this.blur();">
問題点
- ユーザーが入力するためにフォーカスを維持できない。
改善策
- スクリプトでフォーカスを強制的に変更しない。
4. アクセシビリティのメリット
a. ユーザー体験の向上
- 予期しない動作がなくなることで、ユーザーはコンテンツに集中しやすくなります。
b. ユーザーの操作制御の確保
- ユーザーが自分の意思で操作を完了できるようになります。
c. 支援技術との互換性
- スクリーンリーダーなどの支援技術が正確に動作する環境を提供します。
5. テスト方法
a. 手動テスト
- キーボードでフォームやリンクをナビゲート。
- フォーカス時に予期しない動作がないことを確認。
b. 自動テストツール
- AxeやWAVEなどのアクセシビリティチェックツールを使用して確認。
まとめ
WCAG 2.2の「3.2.1 フォーカス時の動作」は、フォーカス時に予期しない文脈変更を防ぎ、すべてのユーザーが快適に操作できる環境を提供することを目的としています。
実装ポイント
- フォーカス時に文脈が変更されないようにする。
- クリックやEnterキー押下をトリガーとする。
- 新しいウィンドウやタブを開く場合は注意を促す。
これにより、ユーザーが予期しない動作に戸惑うことなく、スムーズな操作体験を提供できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。