WCAG 2.2 ガイドライン「3.2.5 リクエスト時の変更」Level AAA について
はじめに
WCAG 2.2の「3.2.5 リクエスト時の変更」は、ユーザーの操作やリクエストによってのみ文脈が変更されることを求めています。この基準は、ユーザーが予期しないページ更新やリダイレクト、ポップアップウィンドウの表示などに混乱しないようにするために重要です。
1. 基準の概要
要件
- 文脈の変更（リダイレクト、ページ更新、新しいウィンドウの表示など）は、ユーザーのリクエストによってのみ実行されること。
- 自動的な文脈変更をオフにする仕組みを提供する場合も基準を満たします。
文脈の変更例
- ページの自動リロード
- 自動リダイレクト
- ポップアップウィンドウの自動表示
- ドロップダウンメニューの選択によるページ移動
2. 実装方法
a. 自動更新をオフにする仕組みを提供
動的コンテンツが自動で更新される場合、ユーザーが手動で更新をトリガーできる仕組みを用意します。
例: 更新ボタンを追加
<p>最新情報を確認するには、以下のボタンをクリックしてください。</p>
<button onclick="updateContent()">更新する</button>
<script>
function updateContent() {
// 最新データの取得処理
alert("コンテンツが更新されました。");
}
</script>
b. 自動リダイレクトの使用を避ける
自動的なリダイレクトを使用せず、ユーザーが明示的にリンクをクリックすることで移動する方法を採用します。
例: リンクでページ移動を誘導
<p>次のページに移動するには、<a href="next-page.html">こちらをクリック</a>してください。</p>
c. onchangeイベントでの文脈変更を防ぐ
onchangeイベントを使用しても、選択時に自動で文脈変更を行わないようにします。
例: ユーザー操作によるページ移動
<select id="navigation">
<option value="home">ホーム</option>
<option value="about">会社概要</option>
</select>
<button onclick="navigate()">移動</button>
<script>
function navigate() {
const value = document.getElementById('navigation').value;
location.href = value + ".html";
}
</script>
d. ポップアップウィンドウの制御
ポップアップウィンドウを表示する場合は、ユーザー操作によるトリガーとする必要があります。
例: ユーザー操作でポップアップを表示
<p><a href="popup.html" target="_blank">新しいウィンドウで開く</a></p>
3. よくある失敗例とその改善策
a. 自動的なページリダイレクト
失敗例
<meta http-equiv="refresh" content="5; url=next-page.html">
改善策
- ユーザーがリダイレクトをトリガーする方法を採用。
<p>次のページに移動するには、<a href="next-page.html">こちらをクリック</a>してください。</p>
b. 自動更新が停止できない
失敗例
- 動的コンテンツが一定時間ごとに自動で更新され、ユーザーが制御できない。
改善策
- 手動更新ボタンを提供。
<button onclick="updateContent()">更新する</button>
4. アクセシビリティのメリット
a. 予測可能な動作
- 文脈の変更がすべてユーザーの操作に基づいて行われるため、予測可能な操作体験が提供されます。
b. 混乱を防ぐ
- 自動的な変更がないため、ユーザーが操作内容を把握しやすくなります。
c. 支援技術との互換性
- スクリーンリーダー利用者にとって、意図しない文脈変更がなくなることで使いやすさが向上します。
5. テスト方法
a. 手動テスト
- ページ内のリンクやフォームを操作し、予期しない文脈変更がないことを確認。
- 自動リダイレクトや更新が手動操作に置き換えられているか確認。
b. 自動テストツール
- AxeやWAVEなどを使用して、自動リダイレクトやポップアップの有無を確認。
まとめ
WCAG 2.2の「3.2.5 リクエスト時の変更」は、ユーザー操作をトリガーとして文脈を変更し、予期しない動作を防ぐことを目的としています。
実装ポイント
- 自動更新をオフにする仕組みを提供する。
- リダイレクトはユーザーの操作で実行する。
onchangeやポップアップウィンドウは慎重に扱う。
これにより、すべてのユーザーが安心してウェブコンテンツを利用できるようになります。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。