この記事でわかること

  • 2本指やなぞる操作について定めた、WCAGの達成基準2.5.1の内容
  • 「なぞる操作」と「ドラッグ」の違いと、対象にならない操作
  • スライドに「前へ」「次へ」のボタンを置く書き方
  • ボタンがある版とない版を、ブラウザで比べた結果

スマホで見たときに格好よく見えるからと、お知らせのスライドを左右になぞるだけで切り替える作りにしていませんか。頭につけた指示具や視線で画面を操作する人など、なぞる操作を正確にできない人もいます。この記事では、なぞる操作に1回押すだけの代わりを用意する方法を、WCAGの達成基準2.5.1を軸に整理します。

拠り所は、W3Cの達成基準2.5.1の解説(Understanding)、技法G215、失敗例F105で、2026年10月31日に原文を確かめました。比べたスライドは、この記事のための見本です。ツールやスクールを選んで勧めることはしません。

先に結論: なぞる操作は残してよいが、押すだけでできる方法も用意する

なぞる操作や2本指の操作で動く機能には、1回押すだけでも同じことができるボタンを用意します。 なぞる操作そのものは、残してかまいません。

操作 例 代わりの例
なぞる スライドを左右になぞる 「前へ」「次へ」のボタン
2本指 地図を2本指で広げる 拡大・縮小のボタン
道筋をたどる 決まった形を描いて開く 1回押すボタン

2本指やなぞる操作に関わる基準(2.5.1)

WCAG 2.2の達成基準2.5.1(レベルA)は、複数の指やなぞる操作を使う機能はすべて、その操作が欠かせない場合を除いて、なぞらずに1本の指やマウスで操作できるようにすることを求めています。

解説では、なぞる操作を、指やマウスを動かす道筋が大事な操作だと説明しています。左右にさっと払う操作が代表例です。複数の指の操作には、2本指で広げる拡大や、2本・3本の指でのタップやなぞる操作が挙げられています。

1本指や棒で入力する人には、こうした操作が難しかったり、できなかったりします。解説では、タップ、クリック、ダブルタップ、長押しなどのほかの方法でも操作できるなら、なぞる操作を使ってよいとしています。

対象にならない操作と、ドラッグとの違い

この基準は、作る人が用意した内容の中の操作が対象です。端末の通知を出す操作や、ブラウザの戻る・進むの操作は対象になりません。署名を書く操作のように、道筋そのものが欠かせないものは例外です。

なぞる操作は、動かす道筋や向きが大事な操作です。一方、ドラッグは、つかんだものを別の場所に動かす操作で、始めと終わりの位置が大事になります。ドラッグは、WCAG 2.2で加わった達成基準2.5.7で扱われます。

書き方の例: スライドに「前へ」「次へ」のボタンを置く

次のHTMLは、なぞる操作で切り替わるスライドに、1回押すだけで切り替わる「前へ」「次へ」のボタンを足した例です。技法G215も、矢印のボタンのような操作の部品を用意して、1回押すだけでスライドを進められるようにする方法を紹介しています。

<ul class="slides" id="slides">
  <li>お知らせ1</li><li>お知らせ2</li><li>お知らせ3</li>
</ul>
<!-- なぞる操作の代わりに、1回押すだけのボタンを置く -->
<button type="button" id="prev">前へ</button>
<button type="button" id="next">次へ</button>
<script>
  const slides = document.getElementById("slides");
  let index = 0;
  function show(i) {
    index = (i + 3) % 3;
    slides.style.transform = `translateX(${-100 * index}%)`;
  }
  document.getElementById("prev").addEventListener("click", () => show(index - 1));
  document.getElementById("next").addEventListener("click", () => show(index + 1));
  // なぞる操作も残してよい(ボタンが代わりになる)
  let startX = 0;
  slides.addEventListener("touchstart", (e) => { startX = e.touches[0].clientX; });
  slides.addEventListener("touchend", (e) => {
    const dx = e.changedTouches[0].clientX - startX;
    if (Math.abs(dx) > 40) show(index + (dx < 0 ? 1 : -1));
  });
</script>

ボタンは見た目の矢印だけにせず、「前へ」「次へ」のように何をするかが分かる名前にします。

手順: 自分のサイトのなぞる操作を見直す

  1. なぞる・2本指の操作を探す: スライド・地図・画像の拡大・ページめくりなど、なぞる操作で動く部分を書き出します。失敗例F105では、ページのコードにtouchstartやtouchendの処理があるかを確かめる方法も挙げています
  2. 1回押すだけでできるかを試す: マウスのクリックやタップだけで、同じことができるかを確かめます
  3. 代わりのボタンを足す: できない部分に、前後・拡大縮小などのボタンを足します
  4. 代わりがドラッグだけになっていないかを見る: 代わりの操作もドラッグに頼っていないかを確かめます
  5. キーボードでもたどる: 足したボタンにTabキーで届くかも、あわせて確かめます

試した結果

上のHTMLと、同じスライドからボタンを外して、なぞる操作だけで切り替わるようにした版を作りました。2つのページを手元のPCで立てた小さなサーバーに置き、ヘッドレスのChromeに、マウスのクリック・Tabキー・指でなぞる操作の模擬を送って、切り替わり方を比べました。

  • ボタンのある版では、「次へ」を1回押すと2枚目に、最初の状態から「前へ」を1回押すと3枚目に切り替わりました
  • ボタンのある版でも、左になぞる操作で次のスライドに切り替わりました
  • ボタンのない版では、スライドを何度クリックしても切り替わらず、左になぞる操作でだけ切り替わりました
  • ボタンのある版では、Tabキーで「前へ」「次へ」の順に届きました

Chromeは作業PC(Mac)のGoogle Chrome 156を、画面を出さずに動かしました。実機のスマホやタブレットの指で試してはいません。

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

目安は、「なぞる操作で動く部分に、押すだけの部品を足せるか」です。スライドの前後や地図の拡大縮小のように、決まった動きなら、ボタンを足すだけで直せます。

手書きの入力や、道筋そのものに意味がある操作は、例外に当たるかを含めて、作った人や発注した人と相談して決めます。スクリプトの組み直しが必要な場合は、Webデザインを学べる講座で、操作の部品の作り方を見てもらう方法もあります。

つまずきやすいところ

まとめ

  • なぞる操作や2本指の操作で動く機能には、1回押すだけの代わりを用意します
  • なぞる操作そのものは残してかまいません
  • 代わりの操作をドラッグだけにしないようにします
  • 署名のように、道筋そのものが欠かせない操作だけが例外です