この記事でわかること

  • 押し間違いを取り消せるようにすることを定めた、WCAGの達成基準2.5.2の内容
  • 押した瞬間ではなく、離したときに動作を決める理由
  • ボタンをclickで動かす書き方と、押した瞬間に動かす作りとの違い
  • ブラウザで、マウス・キーボード・タッチの操作をまねて比べた結果

削除のボタンに指が触れた瞬間に、下書きが消えてしまう。手がふるえやすい人や、画面が見えにくい人は、思っていない所に触れてしまうことがあります。押した瞬間に動く作りでは、触れた後で気づいても取り消せません。この記事では、押した指を離すまで動作を決めない作り方を、WCAG 2.2の達成基準2.5.2を軸に整理します。

読み比べたのは、W3Cの達成基準2.5.2の解説(Understanding)と、技法G212・G210、失敗例F101の原文で、2026年11月2日に確かめました。例に使う下書きの削除のボタンは説明のための作り物で、特定の道具や講座をすすめる内容ではありません。

先に結論: 動作はclickで決め、押した瞬間には動かさない

ボタンの動作は、指やマウスのボタンを離したときに決まるclickで書きます。 押した瞬間に反応するmousedown・touchstart・pointerdownで動作を完了させると、押し間違えたときに取り消せません。押した瞬間に動かすなら、取り消しや元に戻す手段を用意します。

作り方 押し間違えたとき
clickで動かす 指やマウスを外へずらしてから離せば、取り消せる
押した瞬間に動かし、元に戻す手段がある 動いた後で、元に戻せる
押した瞬間に動かし、元に戻す手段もない 取り消せない(失敗例F101に当たる)

押し間違いを取り消せるようにする基準(2.5.2)

WCAG 2.2の達成基準2.5.2(レベルA)は、1本の指やマウスで操作できる機能について、次のどれかに当てはまることを求めています。

  • 押した瞬間(押し下げ)を、機能のどの部分を動かすのにも使わない
  • 離したときに完了し、完了する前にやめるか、完了した後に元に戻す手段がある
  • 離すと、押したときの結果が元に戻る
  • 押した瞬間に完了することが、欠かせない

解説では、この基準のねらいを、意図しない、または誤ったポインタの入力を防ぎやすくすることとしています。いろいろな障害のある人が、望まない結果になるタッチやマウスの操作を、思わず始めてしまうことがあるからです。

離したときに動かすと、取り消せる理由

解説では、取り消しを組み込むいちばん利用しやすい方法は、離したときに動作が起きるようにすることだとしています。タッチの画面では、指がボタンの範囲の中にあるまま離れたときだけ動作が起き、マウスでも、最初に押したボタンの範囲の中でマウスのボタンを離したときに起きます。

そのため、押し間違いに気づいたら、指やマウスをボタンの外へずらしてから離せば、動作を取り消せます。解説では、JavaScriptのclickは、マウスの主なボタンを離したときに起き、名前に反して入力の手段に左右されず、タッチやキーボードの操作でも働くとしています。

技法G212は、ボタンなどの部品の初期のふるまいを使い、押した瞬間に動かす指定で上書きしないことを、この基準を満たすいちばん簡単な方法としています。失敗例F101は、clickの代わりに、mousedown・touchstart・pointerdownのような押し下げの合図で動作させ、取り消しも元に戻す手段もない作りを、失敗としています。

書き方の例: 削除のボタンをclickで動かす

次のHTMLは、下書きを削除するボタンの例です。動作はclickで書き、押した瞬間には何もしません。結果は、ボタンの下の行に表示します。

<button type="button" id="delete-draft">下書きを削除する</button>
<p id="status" role="status"></p>

<script>
  // click は、押した指やマウスのボタンを離したときに起きる
  document.getElementById("delete-draft").addEventListener("click", () => {
    document.getElementById("status").textContent = "下書きを削除しました";
  });
</script>

ここで"click"を"pointerdown"に書きかえると、指やマウスのボタンが触れた瞬間に削除が終わってしまいます。失敗例F101の形です。

手順: 自分のページで、押した瞬間に動く所を探す

  1. 押したまま外へずらす: ボタンを押したまま、指やマウスをボタンの外へずらしてから離し、動作が起きないかを確かめます
  2. 合図の名前を探す: JavaScriptで、mousedown・touchstart・pointerdownに動作をつないでいないかを探します
  3. キーボードでも押す: Tabキーでボタンを選び、EnterキーとSpaceキーで動くかを試します
  4. clickに直す: 押した瞬間に動かす理由がなければ、clickに書きかえます
  5. 元に戻す手段を用意する: 押した瞬間に動かす必要があるなら、取り消しや元に戻すボタンを用意します

試した結果

上のHTMLと、同じボタンを"pointerdown"で動かす版を作りました。手元のPCの中だけで動く小さな配信の仕組みからページを出し、画面を表示しない形のChromeで開いて、マウス・キーボード・タッチの操作をまねて、削除の表示が出るかを調べました。

  • clickの版は、マウスのボタンを押しただけでは表示が出ず、押したままボタンの外へずらして離すと、最後まで表示は出ませんでした。ボタンの上で離すと、表示が出ました
  • clickの版は、EnterキーとSpaceキーでも、タッチの操作をまねたタップでも表示が出ました。タッチでも、触れたまま外へずらして離すと、表示は出ませんでした
  • pointerdownの版は、マウスのボタンを押した瞬間に表示が出て、外へずらして離しても取り消せませんでした。タッチの操作でも、触れた瞬間に表示が出ました
  • pointerdownの版は、EnterキーとSpaceキーでは表示が出ませんでした

試した環境は、作業用のMacで動かした、画面を表示しない形のChrome 156です。タッチは、ブラウザの開発用の機能で操作をまねたもので、実機のスマートフォンでは試していません。読み上げソフトでの確認もしていません。

自分で直すか、相談するかの判断

目安は、「押した瞬間に動く仕組みを、自分で書いたか」です。自分で書いたJavaScriptなら、合図をclickに書きかえれば直せます。

部品を作る道具やライブラリの機能で、押した瞬間に動く作りになっている場合は、離したときに動く設定があるかを先に調べます。見つからなければ、その部品の作り手か、制作を任せた人に、取り消せるようにする方法を尋ねます。ボタンの動き方まで自分で判断できるようになりたいなら、Webデザインを学べる講座で、作ったページを講師に触ってもらって確かめる方法もあります。

つまずきやすいところ

まとめ

  • 押し間違いを取り消せるように、ボタンの動作は離したときに決まるclickで書きます
  • 押した瞬間に動くmousedown・touchstart・pointerdownで動作を完了させると、取り消せません
  • clickは、マウス・キーボード・タッチのどれでも働きます
  • ボタンを押したまま外へずらして離し、動作が起きないかを確かめます