WCAG 2.2 ガイドライン「3.2.2 入力時の動作」Level A について
はじめに
WCAG 2.2の「3.2.2 入力時の動作」は、ユーザーインターフェースコンポーネントの設定を変更した際に、事前の通知なしに文脈が自動的に変化しないことを求めています。この基準は、ユーザーが予期しないページの動作に混乱しないようにすることを目的としています。
1. 基準の概要
要件
- ユーザーが操作した結果として文脈が変更される場合、事前にその動作について通知する必要があります。
- 文脈の変更には以下が含まれます：
- 新しいページやウィンドウの自動的な開閉
- ページ全体のリロード
- フォーカス位置の移動
2. 実装方法
a. submitボタンを使用する
ユーザーが操作を確定する際に、明示的にボタンをクリックすることで動作を発生させます。
例: 選択後にsubmitボタンを押して動作
<form action="process.php" method="post">
<label for="options">選択肢を選んでください：</label>
<select id="options" name="options">
<option value="1">オプション1</option>
<option value="2">オプション2</option>
</select>
<button type="submit">送信</button>
</form>
b. onchangeイベントで文脈変更を防ぐ
onchangeイベントを使用する場合でも、文脈変更を自動で行わず、ユーザーが意図した操作をトリガーとします。
例: onchangeで自動リダイレクトを回避
<select id="navigation" onchange="document.getElementById('navigateBtn').disabled = false;">
<option value="home">ホーム</option>
<option value="about">概要</option>
<option value="contact">お問い合わせ</option>
</select>
<button id="navigateBtn" onclick="changePage()" disabled>移動</button>
<script>
function changePage() {
const select = document.getElementById('navigation');
location.href = select.value + ".html";
}
</script>
c. ユーザーへの事前通知
動作が発生する前に、ユーザーにその内容を明確に伝えます。
例: 新しいウィンドウを開くリンク
<p><a href="example.html" target="_blank">新しいタブで開きます</a></p>
3. よくある失敗例とその改善策
a. 自動で文脈が変更される
失敗例
<select onchange="location.href=this.value;">
<option value="home.html">ホーム</option>
<option value="about.html">概要</option>
</select>
問題点
- ユーザーが選択するだけでページが切り替わるため、予期しない動作を引き起こします。
改善策
<select id="navigation">
<option value="home.html">ホーム</option>
<option value="about.html">概要</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">新しいタブで開きます</a></p>
4. アクセシビリティのメリット
a. ユーザーの予測可能性が向上
- 文脈が変更される際に事前通知を行うことで、ユーザーは動作を予測しやすくなります。
b. 操作性の向上
- ユーザーが意図的に操作を完了させることで、混乱を防ぎます。
c. 支援技術との互換性
- スクリーンリーダーが文脈変更を正確に認識することで、アクセシビリティが向上します。
5. テスト方法
a. 手動テスト
- コンポーネントを操作し、予期しない文脈変更がないか確認。
- 文脈変更が発生する場合、事前に通知があることを確認。
b. 自動テストツール
- AxeやWAVEなどのツールを使用して、自動的な文脈変更の有無を確認。
まとめ
WCAG 2.2の「3.2.2 入力時の動作」は、ユーザーインターフェースの操作時に予期しない文脈変更を防ぎ、ユーザーにとって予測可能で使いやすい体験を提供することを目的としています。
実装ポイント
submitボタンを使用して明示的な操作を促す。- 自動リダイレクトや新しいウィンドウを事前通知なしに発生させない。
- 選択や入力だけでは文脈変更を起こさないようにする。
これにより、すべてのユーザーに快適で予測可能なウェブ体験を提供できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。