WCAG 2.2の達成基準2.5.7「ドラッグ操作」は、ドラッグで使う機能を、ドラッグなしのクリックやタップでも実行できるようにすることを求めるLevel AAの基準です。
ドラッグ操作そのものを禁止する基準ではありません。
押したまま正確にポインターを動かすことが難しい利用者にも、同じ機能を使える操作方法を提供することが目的です。
WCAG 2.2で追加された達成基準の全体像を把握したい場合は、先に概要記事を確認すると位置づけを理解しやすくなります。
達成基準2.5.7が求めること
ドラッグ操作とは、要素を押した状態のままポインターを動かし、目的の位置で離す操作です。
マウスのドラッグ＆ドロップ、タッチ画面で項目を押したまま移動する操作、スライダーのつまみを動かす操作などが該当します。
単一ポインターとは、マウス、一本の指、スタイラスのように、画面上の一点を指定する入力方法です。
達成基準2.5.7では、ドラッグで提供する機能について、押したまま移動しなくてもクリックやタップを一回以上組み合わせて同じ結果に到達できるようにします。
- 並べ替えでは、項目を選んで「上へ」「下へ」ボタンで移動できるようにする。
- カンバン形式の画面では、項目を選んで移動先をメニューから指定できるようにする。
- スライダーでは、値を増減するボタンや数値入力を併設する。
- 地図や表示領域では、上下左右へ移動するボタンを用意する。
代替操作は、ドラッグ用の部品と同じ部品に組み込む必要はありません。
同じページ内で見つけられ、同じ機能を実行できることが判断の要点です。
キーボード対応とは別に確認する
キーボードで操作できることは大切ですが、キーボード操作だけを追加しても、達成基準2.5.7の代替にはなりません。
タッチ画面を一本の指で使う利用者が、ドラッグせずに同じ機能を実行できるかを別に確認します。
キーボード操作とポインター操作では確認する要件が異なります。
ポインター操作の押下と解除に関する設計は、達成基準2.5.2「ポインターキャンセル」の実装例も参考になります。
適用範囲と例外
ページの制作者が実装したドラッグ機能は、原則として確認対象です。
一方、次のいずれかに該当する場合は例外になります。
- ドラッグが本質的な場合：ドラッグを取り除くと情報や機能の意味が変わり、適合する別の方法でも同じ目的を実現できない場合。
- ユーザーエージェントが決める機能の場合：ブラウザーなどが提供し、ページの制作者が変更していない操作である場合。
元の原稿では署名入力を例に挙げていましたが、「署名であれば常に例外」という意味ではありません。
軌跡そのものが機能に欠かせず、同じ目的を満たす代替方法がないかを個別に判断します。
ブラウザー標準のスクロールなどは、ページ側で独自のドラッグ処理に置き換えていなければ、通常はユーザーエージェントが提供する機能として扱います。
独自の処理で標準操作を抑制している場合は、ページ側の機能として代替操作を検討します。
ドラッグを代替する設計パターン
| ドラッグで行う機能 | 代替操作の例 | 確認する結果 |
|---|---|---|
| リストの並べ替え | 項目を選び、上へ、下へボタンを押す | 希望する順序まで移動できる |
| ボード間の項目移動 | 項目を選び、移動先をメニューから選ぶ | ドラッグ時と同じ列へ移動できる |
| スライダーの値変更 | 増減ボタンまたは数値入力を使う | 必要な値を選べる |
| 要素の位置指定 | 開始位置と移動先を順にクリックする | 同じ位置関係を指定できる |
代替操作は、一回のクリックだけで完了しなくても構いません。
項目の選択、メニューの表示、移動先の選択という複数回のクリックやタップで同じ結果を得る設計も可能です。
スライダーに増減ボタンを加える実装例
次の例では、スライダーをドラッグできる状態を残しつつ、値を一つずつ変更するボタンを併設します。
記号だけのボタンには操作内容が分かる名前を付け、現在値も画面に表示します。
HTML
<div>
<label for="slider">音量</label>
<button type="button" id="decrease" aria-label="音量を1下げる">−</button>
<input type="range" id="slider" min="0" max="100" value="50">
<button type="button" id="increase" aria-label="音量を1上げる">＋</button>
<output id="sliderValue" for="slider">50</output>
</div>JavaScript
const slider = document.getElementById('slider');
const output = document.getElementById('sliderValue');
function changeValue(delta) {
const min = Number(slider.min);
const max = Number(slider.max);
const current = Number(slider.value);
const next = Math.min(max, Math.max(min, current + delta));
slider.value = String(next);
output.value = slider.value;
}
document.getElementById('decrease').addEventListener('click', () => {
changeValue(-1);
});
document.getElementById('increase').addEventListener('click', () => {
changeValue(1);
});
slider.addEventListener('input', () => {
output.value = slider.value;
});この例では、マウスやタッチでつまみをドラッグする方法と、ボタンをクリックまたはタップする方法のどちらでも値を変更できます。
実際の画面では、必要な刻み幅、最小値、最大値、変更後の処理に合わせて調整します。
よくある失敗と改善方法
ドラッグ以外の操作がない
項目の並べ替えやボード間の移動をドラッグだけで提供すると、押した状態を保ちながら正確に動かせない利用者は機能を完了できません。
項目を選択した後に使える移動ボタンや移動先メニューを追加します。
キーボード操作だけを代替にする
矢印キーで移動できても、クリックやタップだけでは操作できない状態が残る場合があります。
キーボード対応を保ったうえで、画面上のボタンやメニューもポインターで操作できるようにします。
代替操作で同じ結果に到達できない
「左へ50ピクセル」のような固定移動だけでは、ドラッグで指定できる位置を十分に選べないことがあります。
元のドラッグ操作が生む結果を整理し、その範囲を代替操作でも扱えるように設計します。
右クリックだけに依存する
右クリックのコンテキストメニューだけでは、タッチ操作で同じ手順を使いにくい場合があります。
通常のクリックやタップで開ける、名前の明確なボタンやメニューを用意します。
手動テストの進め方
ドラッグが必要かどうかは、画面の見た目だけでは判断できません。
実際の操作と結果を確認する手動テストを中心に進めます。
- 並べ替え、スライダー、地図、カルーセル、ボードなど、押したまま動かす機能を洗い出す。
- 各機能に、ドラッグを使わないクリックまたはタップの操作があるか確認する。
- 代替操作だけを使い、ドラッグ時と同じ結果に到達できるか確かめる。
- 代替操作がキーボードだけに限られていないか確認する。
- マウスとタッチ操作の両方で、代替手段を見つけて完了できるか試す。
- 例外と判断した機能は、ドラッグが本質的である理由、またはユーザーエージェントが提供する機能である理由を記録する。
AxeやWAVEなどの自動チェックツールは、関連する別の問題を見つける助けにはなりますが、ドラッグと代替操作が同じ結果を生むかまでは自動判定できません。
自動チェックと手動確認の役割分担は、ウェブアクセシビリティチェックの進め方で解説しています。
実装とレビューのチェックリスト
- ドラッグ可能な機能を画面単位で洗い出したか。
- クリックやタップで使える代替操作があるか。
- 代替操作でドラッグ時と同じ結果を得られるか。
- ボタンやメニューの名前から操作内容が分かるか。
- マウスとタッチのどちらでも代替操作を完了できるか。
- キーボード対応と単一ポインター対応を別々に確認したか。
- 例外の判断理由を説明できるか。
ドラッグを残しながら操作方法を増やす
達成基準2.5.7への対応では、使い慣れたドラッグ操作を削除する必要はありません。
ドラッグを残したまま、ボタン、メニュー、数値入力、順番に選ぶ操作などを加えます。
代替手段を実装した後は、機能の存在だけで判断せず、ドラッグと同じ結果まで完了できるかを確認します。
この確認によって、操作方法を選べるインターフェースに近づけられます。
当社では、ウェブアクセシビリティを導入しやすくするUUU ウェブアクセシビリティを提供しています。
アクセシビリティ改善を検討している方は、サービスの詳細をご覧ください。