この記事でわかること

  • 端末の動きや体の動きで動かす機能に、WCAGの達成基準2.5.4が求めること
  • 動きで動かす機能が使えない人と、うっかり動いてしまう人がいること
  • ボタンの代わりと、動きへの反応を止める設定の付け方
  • 基準の対象にならない動きと、例外になる場合

スマートフォンを振ると入力を取り消す、傾けると次のページへ進む。こうした操作は手軽ですが、車いすに端末を固定している人や、手を思うように動かせない人には使えません。手が震える人は、意図せず振ってしまうこともあります。この記事では、動きで動かす機能に付ける代わりの手段を、WCAG 2.2の達成基準2.5.4を中心に見ていきます。

参照した資料は、W3Cの達成基準2.5.4の解説(Understanding)と、技法G213、失敗例F106の原文です。確かめた日は2026年11月5日です。メモの入力欄はこの記事のための例で、特定の道具やスクールの紹介ではありません。

先に結論: 同じことを部品でもできるようにし、動きは止められるようにする

動きで動かす機能には、同じ働きのボタンなどを付け、さらに動きへの反応を切る設定を用意します。 機能によって扱いが変わります。

機能の例 すること 根拠
振ると入力を取り消す 戻すボタンと止める設定 G213
傾けて値やページを動かす 同じ働きのボタンと止める設定 G213
歩数計のように動きを数える 代わりは要らない 基準の例外
QRコードにカメラを向ける 基準の対象外 解説の注記

動きで動かす機能の基準(2.5.4)

WCAG 2.2の達成基準2.5.4(レベルA)は、端末の動きや利用者の動きで動かせる機能を、画面の部品でも動かせるようにし、うっかり動かないように動きへの反応を止められるようにすることを求めています。

解説では、ねらいを、端末を振る・傾けるといった動きや、カメラなどに向けた身ぶりで動く機能を、ふつうの画面の部品でも使えるようにすることとしています。スマートフォンやタブレットには、加速度や傾きを測るセンサーがあり、例として、振ると「元に戻す」が動く機能や、手を軽く振るとページを前後に移る機能を挙げています。

代わりと設定が要る理由

解説によると、端末が車いすなどに固定されている人や、体の動きに障害のある人は、こうしたセンサーをまったく、または正確には動かせません。そのため、動きで使える機能は、別の手段でも使えるようにします。

一方で、手の震えなどのために、意図せずセンサーを動かしてしまう人もいます。こうした人が誤って機能を動かさないよう、動きへの反応を切れるようにします。解説では、動きの検出を端末の設定で止められるようにしている場合に、その設定に従うことで満たせることもあるとしています。端末を動かせない場面にいる人にも役立ちます。

対象にならない動きと例外

解説の注記では、カメラに向けた目・顔・手の身ぶりや、端末を傾けたり振ったりする動きを入力として読み取る場合が対象です。位置情報やビーコンで記録される移動や、QRコード・書類・画像を読み取るためにカメラを向ける動きは対象外です。キーボードを打つ、マウスを動かす、タッチ画面を操作する、支援技術を使うといった、操作に伴う動きも対象外としています。

例外は2つです。支援技術などで使える仕組みを通して動きで操作する場合と、動きがその機能に欠かせず、動きを使わないと成り立たない場合です。後者の例に、端末の動きで歩数を数える歩数計を挙げています。

技法G213と失敗例F106

技法G213は、加速度や傾きのセンサーで入力を受け取るときに、2つのことをする方法です。センサーに頼らないボタンやリンクなどのふつうの部品を用意することと、センサーの情報を使わないようにする設定を用意することです。試し方でも、動きで動く機能ごとに、センサーに頼らない同じ働きの手段と、動きの検出を止める設定があるかを確かめます。

G213の例は2つです。1つは、入力欄に文字を入れた後に端末を振ると取り消しを勧める画面が出る機能で、後退キーや入力欄の横の消すボタンでも同じことができ、振って取り消す動きは設定の画面で切れます。もう1つは、左右に傾けて値を変えるスライダーで、同じ働きのボタンと、動きを効かなくするチェックボックスがあります。

失敗例F106は、動きで動かす機能を止められない状態です。例には、傾ける動きで値を増減するスライダーに、動きの検出を止める仕組みが無いものを挙げています。

書き方の例: 振って戻す機能に、ボタンと止める設定を付ける

次のHTMLは、メモの入力欄で、入力した内容をひとつ前に戻す機能を、ボタンと端末を振る動きのどちらでも使えるようにした例です。チェックボックスを外すと、振っても反応しなくなります。

<label for="note">メモ</label>
<input id="note" type="text">
<button type="button" id="undo-button">ひとつ前に戻す</button>
<label><input id="shake-on" type="checkbox" checked> 端末を振って戻す</label>
<script>
  const field = document.querySelector("#note");
  const shakeOn = document.getElementById("shake-on");
  const saved = [""];
  let lastShake = 0;
  field.addEventListener("change", () => saved.push(field.value));
  function undo() {
    if (saved.length > 1) saved.pop();
    field.value = saved.at(-1);
  }
  document.querySelector("#undo-button").addEventListener("click", undo);
  window.addEventListener("devicemotion", (event) => {
    const a = event.acceleration;
    if (!shakeOn.checked || !a || a.x === null) return;   // 設定で止められる
    const now = Date.now();
    if (Math.hypot(a.x, a.y, a.z) > 15 && now - lastShake > 1000) {   // 強く振ったときだけ、1秒に1回まで
      undo();
      lastShake = now;
    }
  });
</script>

ボタンはbutton要素なので、マウスでもキーボードでも押せます。振る動きは、重力を除いた加速度の強さで見分け、弱い揺れでは動かないようにしています。続けて揺れても何度も戻らないよう、1秒に1回までにしています。

手順: 自分のページの動きの操作を確かめる

  1. 動きで動く機能を探す: 振る・傾ける・カメラに向けた身ぶりで動く機能を書き出します
  2. 対象か見分ける: 位置情報の移動や読み取りのためにカメラを向ける動き、動きそのものが目的の機能は、外して考えます
  3. 代わりを付ける: 機能ごとに、同じ働きのボタンやリンクを用意します
  4. 止める設定を付ける: 動きへの反応を切るチェックボックスなどを、見つけやすい場所に置きます
  5. 動かさない場合を確認する: 端末を机に置いたままでも、すべての機能を最後まで操作できるかを見ます

試した結果

作業用のPCの中でだけ動くWebサーバーに上のHTMLを置き、画面を出さない設定にしたChromeで読み込みました。PCには動きのセンサーが無いため、Chromeの開発用の機能でセンサーの値を差し替え、端末を動かしたときと同じ動きの通知をページに届けました。

どの試し方も、メモに「あ」を入れて確定し、続けて「い」を足して確定した状態(入力欄は「あい」)から始めました。

  • マウスでボタンを押すと、入力欄はひとつ前の「あ」に戻りました
  • Tabキーでボタンに移ってEnterキーを押しても、同じく「あ」に戻りました
  • 重力を除いた加速度を21にして0.2秒保ち、0.2秒止めて、もう一度0.2秒強く揺らすと、戻ったのは1回だけで「あ」でした。この間にページへ届いた動きの通知は56回で、間隔は16ミリ秒でした
  • 強さ5の弱い揺れを0.6秒続けても、入力欄は「あい」のままでした
  • Tabキーでチェックボックスに移ってスペースキーで外してから強く揺らすと、入力欄は「あい」のまま変わりませんでした

環境は作業用のMacで、ブラウザはChrome 156を画面を出さずに動かしました。実際のスマートフォンを振っては試していません。15という強さの目安は、この例のために決めたもので、端末や持ち方によって合う値は変わります。

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

見分ける目安は「動きで動く機能が、ページの作りの一部にとどまるか」です。振って戻す、傾けてページを送るといった機能なら、同じ働きのボタンと止める設定を足すだけで済み、自分で直せます。

傾ける動きそのものを遊びにしたゲームや、動きを使った体験の企画では、動きが欠かせない機能かどうか、ボタンでも楽しめる形にできるかの判断が要ります。その場合は、企画を決めた人や制作を任せた人と相談します。動きの扱いを含めた画面の作り方を学びたい場合は、Webデザインの講座で、作った画面を講師に見てもらうのも一案です。

つまずきやすいところ

まとめ

  • 端末を振る・傾けるなどの動きで動く機能は、WCAG 2.2の達成基準2.5.4の対象です
  • 同じことをボタンなどの部品でもできるようにし、動きへの反応を止める設定を付けます
  • 位置情報の移動や読み取りのためにカメラを向ける動きは対象外で、歩数計のように動きが欠かせない機能は例外です
  • 振る動きは強さの目安と間隔を決め、弱い揺れや続けての揺れで動かないようにします