WCAG 2.2 ガイドライン「2.2.3 タイミングなし」Level AAA について
はじめに
WCAG 2.2の「2.2.3 タイミングなし」では、コンテンツにおいて時間制限がユーザーの操作や体験を妨げないことを求めています。この基準は、時間的な制約がユーザーの行動を制限することを防ぐためのものです。
1. 基準の概要
要件
- タイミングがコンテンツのイベントやアクティビティの本質的な部分でない限り、時間制限を設けない。
- 例外:
- 非対話型の同期メディア（例: 映画や音楽の再生）。
- リアルタイムイベント（例: ライブストリームやスポーツの試合）。
2. 実装方法
a. 時間制限を排除する
フォームやタスクの実装例
HTML
<form id="taskForm">
<label for="task">タスクを入力してください:</label>
<input type="text" id="task" name="task">
<button type="submit">送信</button>
</form>
<div id="message"></div>
JavaScript
const form = document.getElementById('taskForm');
const message = document.getElementById('message');
form.addEventListener('submit', (event) => {
event.preventDefault(); // 時間制限を設けず、ユーザーのペースで操作可能
message.textContent = 'タスクが送信されました。お疲れ様です！';
});
この例では、フォームに時間制限がないため、ユーザーは自分のペースで入力できます。
b. リアルタイムイベントの例外処理
ライブイベントの通知
リアルタイムで進行するイベントに対して、時間制限が不可欠である場合は、その旨を明確に通知します。
HTML
<div>
<p>このライブイベントはリアルタイムで進行しています。巻き戻しや一時停止はできません。</p>
</div>
c. 同期メディアの場合の例外
非対話型の同期メディア（例: 映画の再生）は、タイミングが本質的に必要です。ただし、ユーザーがペースを調整できる機能を追加するとアクセシビリティが向上します。
再生・一時停止のコントロールを提供
HTML
<video id="movie" controls>
<source src="movie.mp4" type="video/mp4">
お使いのブラウザでは動画再生がサポートされていません。
</video>
3. よくある失敗例とその改善策
a. 時間制限が解除できない
失敗例
<form>
<label for="name">名前:</label>
<input type="text" id="name" name="name">
<button type="submit">送信</button>
<p>10秒以内に送信してください。</p>
</form>
問題点
- 時間制限が設定されているため、すべてのユーザーが完了できるとは限りません。
改善策
- 時間制限を排除し、ユーザーが自分のペースでタスクを完了できるようにします。
b. 時間制限のない代替手段が提供されていない
失敗例
- リアルタイムでのデータ入力が必要だが、ユーザーが時間内に完了できない場合の代替手段がない。
改善策
- リアルタイムでのタスク完了が難しいユーザーのために、追加時間や手動入力のオプションを提供します。
4. アクセシビリティのメリット
a. ユーザー体験の向上
- ユーザーがストレスなく自分のペースで操作できる環境を提供します。
b. 多様なユーザーへの対応
- 認知障害や運動障害を持つユーザーにも優しい設計です。
c. 汎用性の向上
- 時間制限のない設計は、すべてのユーザーにとってフレンドリーな体験を提供します。
5. テスト方法
a. 手動テスト
- フォームやタスクに時間制限がないことを確認。
- リアルタイムイベントや同期メディアが適切に通知されていることを確認。
b. ユーザビリティテスト
- 障害を持つユーザーを含むさまざまなユーザーにテストを依頼し、タイミングに関連する問題がないか確認します。
まとめ
WCAG 2.2の「2.2.3 タイミングなし」は、時間制限を排除することで、すべてのユーザーが自由にコンテンツを操作できるようにすることを目的としています。
実装ポイント
- 時間制限を設けない設計を優先する。
- 例外的に時間制限が必要な場合は、明確に通知する。
- ユーザーがペースを調整できる仕組みを提供する。
これらのポイントを実践することで、すべてのユーザーにとって公平で快適な操作環境を提供できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。