適用 (対象)
ポインタを使ってトリガーできるインタラクティブなコントロールを含むすべてのウェブコンテンツ技術
この達成方法は、達成基準 2.5.2: ポインタのキャンセル (失敗) に関連する。
解説
この失敗例の目的は、以下のような状況を解説することである:
- コントロールは、ポインタのダウンイベントで機能が動作するように設定されている。
- それ以上の、中止又は元に戻すメカニズムがない。
- アップイベントによって、動作の結果が反転しない。
- ダウンイベントによって機能が実行され完了することが、必要不可欠でない。
コンテンツ制作者は、click イベントを利用する代わりに、mousedown、touchstart、pointerdownといったダウンイベントを使用することができる。その結果、マウスボタンが押される (ただしまだ離されていない)、もしくは、指又はスタイラスがタッチスクリーンに接触することで、即座に機能が実行されるようになる。
ダウンイベントを使用しつつ、潜在的な問題を軽減することで、達成基準の失敗を回避することは可能である。例えば、機能を容易に元に戻す又は中止する、もしくはアップイベント (マウスボタンが離されたとき、又はタッチスクリーンから指やスタイラスが離されたとき) によって結果を反転させる、という方法を提供することができる。 また、ダウンイベントの使用が、機能にとって必要不可欠なものもあり (例えば、コントロールがピアノ鍵盤のような楽器の操作をシミュレートする、あるいはコントロールが、迅速かつ即時の反応が必要なゲームの画面制御として使用される、など)、その場合は、この達成基準の失敗にはならないことに注意されたい。
以下に概説する検証の手順は、mousedown、touchstart、pointerdownといったイベントリスナーを登録する JavaScript をスキャンする自動化又は半自動化された検証によって補うことができる。自動化された検証は、合否判定には十分ではないが、潜在的に問題のあるコントロールの数を絞り込むのに役立つ。
事例
例 1: ダウンイベントによってトリガーされる「閉じる」ボタン
あるモーダルダイアログには、利用者が入力する必要がある長いフォームが含まれている。そのモーダルダイアログには、ダイアログを閉じ、かつ利用者がフォームに入力したすべての情報を失う、シンプルな「閉じる」コントロールが提供されている。しかしコンテンツ制作者は、単純に click イベント (ほとんどのユーザエージェントではアップイベントによって引き起こされる) をリスニングする代わりに、ダウンイベントによってダイアログを閉じることにしてしまった。これにより、利用者が誤ってダイアログを閉じてしまい、それまでにフォームに入力したすべてのデータを失う可能性がある。
...
<button id="close">Close</button>
...
const trigger = document.getElementById("close");
function closeDialog() {
/* close the modal dialog */
...
}
trigger.addEventListener('mousedown', closeDialog);
trigger.addEventListener('touchstart', closeDialog);
trigger.addEventListener('pointerdown', closeDialog);
検証
手順
利用可能なすべてのコントロール (ボタン、リンク、複雑なウィジェット) に対して、ポインタによる入力 (マウス、タッチスクリーン、スタイラス) を備えたデバイスで、コンテンツを開く:
- ダウンイベント (例えば、マウスボタンを押して離さない、あるいはタッチスクリーン上に指又はスタイラスを置く) をトリガーし、アップイベント (例えば、マウスボタンを離す、あるいは指又はスタイラスを持ち上げる) の前に機能が実行されるかどうかを確認する。
- ダウンイベントで機能が実行された場合、アップイベントのトリガー (押したマウスボタンを離す、もしくはタッチスクリーンから指又はスタイラスを持ち上げる) によって結果が反転するかどうかを確認する。
- そのコントロールにとって、ダウンイベントによる実行及び機能の完了が、必要不可欠であると考えられるかどうかを評価する。
期待される結果
- 手順 #1 が真であり、かつ手順 #2 及び #3 が偽である場合、コンテンツは達成基準を満たさないことになる。