WCAG 2.2の達成基準2.5.2「ポインターキャンセル」は、マウスやタッチによる操作を誤って始めたときに、中止または取り消しができるようにするための基準です。
実装では、押した瞬間に処理を確定させず、離した時点で実行する設計を基本にします。
これにより、利用者は押し間違いに気付いたあと、ポインターを対象の外へ動かすなどして操作を中止できます。
WCAG 2.2の全体像とWebアクセシビリティの基本を先に確認しておくと、この達成基準の位置づけも理解しやすくなります。
ポインターキャンセルが必要な理由
ボタンを押した瞬間に送信や削除が確定すると、利用者が押し間違いに気付いても止められません。
手の震えがある場合、タッチ画面で狙いがずれた場合、隣接するボタンに触れた場合など、意図しない押下はさまざまな場面で起こります。
押してから離すまでに中止できる設計は、こうした誤操作による影響を小さくします。
実装前に区別したい用語
ポインター操作の流れを確認するには、次の用語を区別すると判断しやすくなります。
| 用語 | 意味 | 確認すること |
|---|---|---|
| ダウンイベント | マウスボタンを押す、または画面に指を触れる時点です。 | この時点で処理が確定していないかを確認します。 |
| アップイベント | マウスボタンを離す、または画面から指を離す時点です。 | 処理を確定するタイミングを確認します。 |
| キャンセル | 完了前の操作を中止することです。 | 押したまま対象の外へ移動するなどして中止できるかを確認します。 |
| 取り消し | 完了した操作を元に戻すことです。 | 誤って完了したあとに復元できるかを確認します。 |
| 確認 | 重要な処理の前に、実行する意思をもう一度確かめることです。 | キャンセルを選んだときに処理が行われないかを確認します。 |
ボタンは離した時点で実行する
送信ボタンのような一般的な操作では、HTMLのbutton要素とclickイベントを使うと、押した瞬間の実行を避けられます。
<button type="button" id="submitButton">送信</button>
const submitButton = document.getElementById('submitButton');
submitButton.addEventListener('click', () => {
console.log('送信処理を実行します');
});
次のようにmousedownで処理を実行すると、マウスボタンを押した時点で結果が確定します。
submitButton.addEventListener('mousedown', () => {
console.log('押した時点で送信処理が実行されます');
});
この実装では、利用者が押し間違いに気付いてポインターを移動しても、処理を止められません。
押下時に処理する必要がない操作では、mousedownで結果を確定させない設計にします。
ドラッグ操作には中止手段を用意する
ドラッグ操作では、開始したことと、移動を確定したことを分けて扱います。
要素をつかんだだけで移動を確定せず、ドロップした時点で結果を反映すれば、途中で操作を中止できます。
実装時は、次の点を確認します。
- ドラッグ中にキャンセルボタンまたはEscキーで中止できる。
- 中止したときに、対象が元の位置や状態へ戻る。
- 通常のドロップ操作では、意図した位置へ移動できる。
- 見た目だけでなく、保存されるデータも中止前の状態を保つ。
キャンセルボタンを表示しても、内部のデータがすでに変更されていれば操作を中止したことにはなりません。
画面表示と保存結果の両方を確認する必要があります。
確認ダイアログは重要な操作の補助にする
削除など影響の大きい操作では、実行前の確認を追加すると押し間違いによる結果を防ぎやすくなります。
<button type="button" id="deleteButton">削除</button>
const deleteButton = document.getElementById('deleteButton');
deleteButton.addEventListener('click', () => {
const confirmed = window.confirm('本当に削除しますか？');
if (!confirmed) {
return;
}
console.log('削除処理を実行します');
});
確認ダイアログを追加した場合も、ボタン自体が押した瞬間に実行されていないかを別に確認します。
確認画面があることだけで、ポインター操作の中止方法を調べたことにはなりません。
手動テストの進め方
ポインターキャンセルは、押す、移動する、離すという操作の順序を確かめる必要があるため、実際の操作による確認が中心になります。
ボタンの確認
- 対象のボタン上でマウスボタンを押し、押したままにします。
- マウスボタンを押したまま、ポインターをボタンの外へ移動します。
- ボタンの外でマウスボタンを離します。
- 送信や削除などの処理が実行されていないことを確認します。
- 続いて通常どおりクリックし、必要な処理が実行されることを確認します。
タッチ操作でも、触れる、対象の外へ指を動かす、指を離すという流れを確認します。
ドラッグ操作の確認
- ドラッグを開始し、確定前にキャンセル操作を行います。
- 対象の位置と保存データが元の状態を保っていることを確認します。
- 通常どおりドロップし、移動が正しく確定することも確認します。
確認ダイアログの確認
- 対象の操作を始め、確認ダイアログでキャンセルを選びます。
- 処理が実行されていないことを確認します。
- 確認を選んだ場合だけ、処理が実行されることを確認します。
自動チェックだけでは操作の途中で中止できるかを判断しにくいため、Webアクセシビリティチェックの進め方も参照し、手動確認と組み合わせます。
ポインター操作とは別に、同じ機能をキーボードでも利用できるかを確認する場合は、WCAG 2.2「2.1.1 キーボード操作」の実装とテストで確認項目を整理できます。
実装レビューのチェックリスト
- 押した時点ではなく、離した時点で処理を実行している。
- 離す前にポインターを対象の外へ移動すると、操作を中止できる。
- ドラッグ操作を途中で中止できる。
- 中止後に画面表示と保存データが元の状態を保つ。
- 重要な操作では、確認または取り消しの方法を検討している。
- マウスとタッチの両方で手動確認している。
実装と確認の要点
ポインターキャンセルの実装では、利用者が押し間違いに気付く時間を残すことが大切です。
一般的なボタンは離した時点で実行し、ドラッグ操作には途中で中止する方法を用意します。
確認ダイアログは重要な操作を守る補助策として使い、ボタンやドラッグの動作そのものは手動で検証します。
当社では、Webアクセシビリティを導入しやすくするUUU ウェブアクセシビリティを提供しています。
サイトのアクセシビリティ向上を検討している方は、サービスの詳細をご覧ください。