WCAG 2.2 ガイドライン「2.5.2 ポインターキャンセル」Level A について
はじめに
WCAG 2.2の「2.5.2 ポインターキャンセル」は、ポインター（例: マウスクリックやタッチ操作）を使った操作が誤って実行されるのを防ぐため、少なくとも1つの適切なキャンセル方法を提供することを求めています。この基準は、誤操作のリスクを減らし、ユーザーが安全に操作を行える環境を提供することを目的としています。
1. 基準の概要
要件
ポインターを使用した操作に対して、次のいずれかを満たす必要があります：
- アップイベントで動作をトリガーする
（例: マウスボタンを離したときやタッチスクリーンから指を離したとき）。 - キャンセルが可能
（例: ドラッグ操作を途中で取り消すことができる）。 - 操作を確認後に実行
（例: 操作を実行する前に確認画面を表示）。
2. 実装方法
a. アップイベントで動作をトリガーする
ポインター操作は、ダウンイベント（クリックやタッチの押下時）ではなく、アップイベント（押下を解除したとき）で動作を開始するようにします。
例: アップイベントを使用
HTML
<button id="submitButton">送信</button>
JavaScript
document.getElementById('submitButton').addEventListener('mouseup', () => {
console.log('送信ボタンがクリックされました');
});
b. ドラッグアンドドロップのキャンセル機能を提供
ドラッグ操作中にキャンセルできる機能を提供します。
例: ドラッグ操作のキャンセル
HTML
<div id="dragArea" draggable="true">ドラッグ可能な要素</div>
<button id="cancelButton">キャンセル</button>
JavaScript
const dragArea = document.getElementById('dragArea');
const cancelButton = document.getElementById('cancelButton');
let isDragging = false;
dragArea.addEventListener('dragstart', () => {
isDragging = true;
console.log('ドラッグ開始');
});
cancelButton.addEventListener('click', () => {
if (isDragging) {
isDragging = false;
console.log('ドラッグキャンセル');
}
});
c. 操作の確認ダイアログを表示
重要な操作では、確認画面を表示して誤操作を防ぎます。
例: 確認ダイアログを追加
HTML
<button id="deleteButton">削除</button>
JavaScript
document.getElementById('deleteButton').addEventListener('click', () => {
const confirmed = confirm('本当に削除しますか？');
if (confirmed) {
console.log('削除しました');
} else {
console.log('削除をキャンセルしました');
}
});
3. よくある失敗例とその改善策
a. ダウンイベントで動作をトリガーする
失敗例
button.addEventListener('mousedown', () => {
console.log('クリックされました');
});
問題点
- ユーザーが意図せず押した場合でも動作が実行される。
改善策
mouseupまたはclickイベントを使用する。
b. キャンセル手段がない
失敗例
- ドラッグ操作で一度開始した操作を途中で取り消す手段がない。
改善策
- キャンセルボタンやEscキーを使って操作を取り消せるようにする。
4. アクセシビリティのメリット
a. 誤操作の防止
- ダウンイベントで操作が実行されるのを避けることで、誤って操作が実行されるリスクを軽減します。
b. ユーザー体験の向上
- 確認画面やキャンセル機能を追加することで、操作に安心感を与えます。
c. 包括性の向上
- タッチスクリーンデバイスや障害を持つユーザーにとって、より使いやすいデザインになります。
5. テスト方法
a. 手動テスト
- ポインター操作がアップイベントで動作をトリガーしているか確認。
- ドラッグ操作にキャンセル機能があるか確認。
b. スクリーンリーダーテスト
- スクリーンリーダーを使って、ポインター操作のアクセシビリティを検証。
c. 自動テストツール
- AxeやWAVEなどのツールを使用して、ポインター操作の適切性を確認。
まとめ
WCAG 2.2の「2.5.2 ポインターキャンセル」は、ポインター操作での誤操作を防ぐため、アップイベントやキャンセル機能を提供することを目的としています。
実装ポイント
- アップイベントで操作をトリガーする。
- キャンセル機能を提供する。
- 重要な操作に確認画面を追加する。
これらを実践することで、誤操作のリスクを減らし、ユーザーに安心感を与えるアクセシブルなウェブコンテンツを構築できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。