2.5.7 ドラッグ動作

達成基準：2.5.7 ドラッグ動作【AA】

マウスやタッチ操作などでの「ドラッグ動作」が必要なインタラクションについて、代替手段（ドラッグせずに操作できる方法）を提供しなければならない。

要件

項目	内容
レベル	AA（WCAG 2.2で追加）
達成基準番号	2.5.7
目的	ドラッグ操作が困難なユーザーでも操作できるようにするため
対象ユーザー	手の震え・筋力低下・マウス/タッチ操作が苦手な方など

要件の詳細

• ドラッグ動作のみで機能するUI（例：ドラッグ＆ドロップ）に対して、
• 同じ結果が得られるような クリックやタップなどの代替手段 を用意する必要がある

例：適合／不適合

不適合な例

• 商品の並び替えをドラッグ操作のみでしか行えない
• カレンダーに予定を移動する操作がマウスのドラッグのみ対応

適合している例

• ドラッグだけでなく、矢印ボタンや「上下に移動」などのUIを併設している
• タッチデバイスでも、「移動先を選択」＋「決定」ボタンで完了できる

実装ヒント

機能	代替手段の例
ドラッグ＆ドロップでの並び替え	「上に移動」「下に移動」ボタンの追加
画像の移動	座標入力フィールド、移動矢印
カレンダーの日付移動	ドロップダウン＋確定ボタンで日付変更

利点

観点	内容
アクセシビリティ	筋力の低いユーザーや支援技術使用者でも操作可能
ユーザビリティ	誤操作のリスク軽減・操作の確実性向上
モバイル対応	タップ精度が低い場面でも代替操作が可能になる

チェックリスト

• ドラッグ以外の操作（クリック/タップ/キーボード）が用意されているか？
• 代替手段でも同じ結果が得られるか？
• モバイルや支援技術でも操作できるか？

例（HTML + JS）

<!-- 並び替えの代替ボタン -->
<div>
  <span>項目A</span>
  <button onclick="moveUp('itemA')">↑</button>
  <button onclick="moveDown('itemA')">↓</button>
</div>

まとめ

項目	内容
達成基準名	2.5.7 ドラッグ動作
達成レベル	AA（WCAG 2.2）
要件	ドラッグ操作の代替手段を提供すること
対象	並び替え、画像移動、ブロック構成など
利点	操作しにくいユーザーにとってのアクセシビリティ向上

一覧に戻る