この記事でわかること

  • ドラッグの操作に、クリックやタップだけで済む代わりを求める、WCAGの達成基準2.5.7
  • 代わりの方法の例と、キーボードやスワイプの操作だけでは足りない理由
  • 並べ替えのリストに「上へ」「下へ」のボタンを付ける書き方と、マウスのクリックで試した結果
  • 自分のページにドラッグだけの操作が残っていないかを確かめる手順

カードを押したまま動かして並べ替える、スライダーのつまみを左右に動かす、といったドラッグの操作は、マウスや指で狙った位置まで押し続けられないと使えません。この記事では、そうした操作に、1回のクリックやタップで同じことができる別の方法を用意する考え方を、アクセシビリティの基準にもとづいて紹介します。

参照したW3Cの資料は、WCAG 2.2の達成基準2.5.7の解説(Understanding)と、技法G219、失敗例F108の3つです。原文には2026年10月27日に目を通しました。例のHTMLは、作業PCのChromeで開き、マウスのクリックを送って動きを見ています。特定のライブラリやツール、スクールのおすすめはしません。

結論: ドラッグとは別に、1回で押せる操作を置く

まとめると、ドラッグで動かす機能には、同じ結果をクリックやタップの1回ずつで得られる操作を、どこかに用意します。 同じ部品でなくてもよく、ボタン・メニュー・数字の欄のどれでもかまいません。よくある操作と代わりの例は、次のとおりです。

ドラッグの操作 代わりの例
リストの並べ替え 上へ・下へのボタン
列の間の移動 移動先のメニュー
スライダー 線の上を押す・数字の欄
地図の表示の移動 上下左右のボタン
横に流れる一覧 前へ・次へのボタン

ドラッグの操作に関わるアクセシビリティの基準

WCAG 2.2の達成基準2.5.7(レベルAA)は、ドラッグの動きで操作する機能は、ドラッグをしなくても、1つのポインターで実現できるようにすることを求めています。ポインターは、マウス・ペン・指のような、画面の位置を指す道具のことです。

解説によると、ドラッグは、押す・押したまま保つ・動かす・離す、の4つの動きでできています。押し続けながら正確に動かすことが難しい人や、トラックボールや視線で操作する道具を使う人には、ドラッグは手間がかかり、まちがいも起きやすいとしています。

対象にならない操作と、例外

ブラウザが用意しているスクロールは、この基準の対象ではありません。スクロールバーを動かす、指でページを動かす、といった操作は、ブラウザの側が責任を持つためです。ただし、ページの側でブラウザのスクロールを止めて、独自のスクロールを作った場合は対象になります。

ドラッグが欠かせない場合も例外です。解説の例を見ると、並べ替え・地図・スライダー・色の選択など、多くの操作にはクリックやタップの代わりが作れるため、例外に当たるかは慎重に判断します。

代わりの方法と、W3Cの技法

技法G219は、ドラッグの代わりに、1回か何回かのクリックやタップで同じ機能を動かせるようにする方法です。例として、1回押すと矢印のボタンが出て1段ずつ動かせる形や、移動先をメニューから選ぶ形を挙げています。

失敗例F108は、ドラッグで動かす以外に、1つのポインターで同じ機能を使う方法がない状態です。並べ替えのリストや、列の間でカードを動かす作業の一覧が、ドラッグでしか動かせない場合が当たります。

代わりは、同じ部品でなくてもかまいません。解説では、色の輪の印をドラッグする部品の横に、色の値を数字で入れる欄を置く例を挙げています。

書き方の例: 並べ替えのリストに上へ・下へのボタンを付ける

次のHTMLは、技法G219の例にならい、作業の優先順位のリストに「上へ」「下へ」のボタンを付けたものです。ドラッグで並べ替える処理はページによって作りが違うため、ここでは省き、クリックやタップで動かす部分だけを書いています。

<p id="msg" aria-live="polite"></p>
<ol id="tasks">
  <li>
    <span>見積もりを送る</span>
    <button type="button" class="up">上へ</button>
    <button type="button" class="down">下へ</button>
  </li>
  <li>
    <span>資料を直す</span>
    <button type="button" class="up">上へ</button>
    <button type="button" class="down">下へ</button>
  </li>
  <li>
    <span>請求書を出す</span>
    <button type="button" class="up">上へ</button>
    <button type="button" class="down">下へ</button>
  </li>
</ol>
<script>
  const list = document.getElementById("tasks");
  function refresh() {
    const items = [...list.children];
    items.forEach((li, i) => {
      const name = li.querySelector("span").textContent;
      li.querySelector(".up").setAttribute("aria-label", name + "を上へ");
      li.querySelector(".down").setAttribute("aria-label", name + "を下へ");
      li.querySelector(".up").disabled = i === 0;
      li.querySelector(".down").disabled = i === items.length - 1;
    });
  }
  list.addEventListener("click", (e) => {
    const button = e.target.closest("button");
    if (!button) return;
    const li = button.closest("li");
    const prev = li.previousElementSibling;
    const next = li.nextElementSibling;
    if (button.matches(".up") && prev) list.insertBefore(li, prev);
    if (button.matches(".down") && next) list.insertBefore(next, li);
    refresh();
    button.focus();
    const pos = [...list.children].indexOf(li) + 1;
    const name = li.querySelector("span").textContent;
    document.getElementById("msg").textContent = name + "を" + pos + "番目にしました";
  });
  refresh();
</script>

いちばん上の「上へ」と、いちばん下の「下へ」は押せないようにしています。どの項目のボタンかが読み上げで分かるように、aria-label属性に項目の名前を入れ、動かした後は押したボタンにフォーカスを戻し、何番目になったかを短い文で知らせます。

手順: ドラッグだけの操作が残っていないかを確かめる

技法G219と失敗例F108の確かめ方に沿った手順です。

  1. ドラッグで動く機能を探す: 並べ替え・スライダー・地図・カードの移動・範囲の選択など、押したまま動かす操作を書き出します
  2. 代わりを探す: それぞれの機能に、ドラッグせずに、クリックやタップの1回ずつで同じ結果になる操作があるかを見ます
  3. 代わりだけで最後まで使う: マウスを押したまま動かさずに、クリックだけで並べ替えなどが最後までできるかを試します
  4. スワイプに頼っていないかを見る: 代わりの方法が、スワイプのような動かす道筋のある操作だけになっていないかを確かめます

試した結果

例のHTMLは、手元のパソコンの中だけで動く簡単なWebサーバーに置き、Chromeを画面なしで起動して開きました。マウスを押して離すクリックの動きだけを送り、押したまま動かす操作は一度も送っていません。

  • 「見積もりを送る」の「下へ」をクリックすると、「資料を直す」「見積もりを送る」「請求書を出す」の順になりました
  • 続けて「請求書を出す」の「上へ」をクリックすると、「資料を直す」「請求書を出す」「見積もりを送る」の順になりました
  • 動かした後も、クリックしたボタンにフォーカスが残り、「請求書を出すを2番目にしました」の文が出ました
  • いちばん上の「上へ」と、いちばん下の「下へ」は押せない状態になっていて、クリックしても並びは変わりませんでした
  • ボタンには、「資料を直すを上へ」のように、項目の名前の入った名前が付いていました

あわせて、button.focus()の行を消した書き方も試しました。この場合、動かした後のフォーカスはボタンから外れていました。

動かしたのは、Mac上のGoogle Chrome 156を画面なしで起動したものだけです。画面読み上げソフト・ほかのブラウザ・タッチの画面では試していません。

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

目安は、「その機能を、押したまま動かさずに、クリックだけで最後まで使えるか」です。使えないなら、上へ・下へのボタンや移動先のメニューを足すことを考えます。

ドラッグの部品をライブラリで作っている場合や、画面の設計そのものを変える必要がある場合は、作り方によって足し方が変わります。サイトを作った人と相談し、作り方に迷うときはWebデザインを教わっている講師にも聞いてみます。

つまずきやすいところ

  • キーボードで動かせれば足りると思う: 解説では、キーボードで同じ操作ができても、クリックやタップで押せる操作の部品がなければ、この基準は満たさないとしています。キーボードでの操作の確かめ方は、Webデザインでキーボードだけで操作できるかを確かめる方法で紹介しています
  • 代わりをスワイプにする: スワイプのような道筋のある操作だけでは、代わりになりません
  • 代わりのボタンが小さすぎる: 上へ・下へのボタンは、押しやすい大きさにしておきます。大きさの決め方は、Webデザインでボタンやリンクの押しやすい大きさを決める方法にまとめています
  • ポインターを重ねたときだけボタンが出る: 技法G219では、1回押すと矢印が出る形も例に挙げていますが、指で操作する画面にはポインターを重ねる操作がありません。重ねたときに出る内容の作り方は、Webデザインのツールチップとホバーで出る内容の作り方が参考になります
  • 動かした後にフォーカスが外れる: 試したときは、フォーカスを戻す行を消すと、動かした後にボタンからフォーカスが外れました。続けて押せるように、押したボタンへ戻しておきます

まとめ

  • ドラッグで動かす機能には、クリックやタップの1回ずつで同じ結果になる代わりを用意します
  • 代わりは同じ部品でなくてよく、ボタン・メニュー・数字の欄でもかまいません
  • キーボードの操作やスワイプだけでは、ドラッグの代わりになりません
  • 並べ替えのリストなら、上へ・下へのボタンを付け、動かした後のフォーカスと知らせ方も整えます