WCAG 2.2 ガイドライン「2.5.7 ドラッグ操作」Level AA について
はじめに
WCAG 2.2の「2.5.7 ドラッグ操作」は、ドラッグ操作が必要な機能について、ドラッグ以外の単一ポインター（例: クリック、タップ）で同じ操作が可能であることを保証することを求めています。この基準は、ドラッグ操作が難しいユーザーへの配慮と、誤操作のリスクを軽減するために設けられています。
1. 基準の概要
要件
- ドラッグ操作が必要な機能には、ドラッグ以外の方法（例: 単一ポインターでのクリックやタップ）を提供する必要があります。
- ドラッグ操作が本質的に必要な場合（例: 署名の入力）や、機能がユーザーエージェントに依存している場合は、この基準の適用外となります。
2. 実装方法
a. ドラッグ操作の代替手段を提供する
ドラッグ操作で可能な機能を、ボタンやスライダーなどの別の方法で実行できるようにします。
例: ドラッグでスライダーを操作する代わりにボタンを提供
HTML
<div>
<button id="decrease">-</button>
<input type="range" id="slider" min="0" max="100">
<button id="increase">+</button>
</div>
JavaScript
const slider = document.getElementById('slider');
document.getElementById('decrease').addEventListener('click', () => {
slider.value = Math.max(slider.min, slider.value - 1);
});
document.getElementById('increase').addEventListener('click', () => {
slider.value = Math.min(slider.max, parseInt(slider.value) + 1);
});
- ボタン操作でスライダーの値を変更可能にします。
b. クリックでドラッグ操作を実現する
ドラッグ操作を模倣するクリック式のインターフェースを提供します。
例: クリックで要素を移動
HTML
<div id="box" style="width: 50px; height: 50px; background: red;"></div>
<button id="moveLeft">左へ移動</button>
<button id="moveRight">右へ移動</button>
JavaScript
const box = document.getElementById('box');
document.getElementById('moveLeft').addEventListener('click', () => {
box.style.transform = 'translateX(-50px)';
});
document.getElementById('moveRight').addEventListener('click', () => {
box.style.transform = 'translateX(50px)';
});
- ドラッグの代わりにクリックで位置を変更できるようにします。
c. コンテキストメニューを活用
右クリックメニューやドロップダウンメニューを使用して操作を提供します。
例: コンテキストメニューでアイテムを移動
HTML
<div id="item" style="width: 50px; height: 50px; background: blue;"></div>
<select id="moveOptions">
<option value="none">選択してください</option>
<option value="left">左へ移動</option>
<option value="right">右へ移動</option>
</select>
JavaScript
const item = document.getElementById('item');
document.getElementById('moveOptions').addEventListener('change', (event) => {
if (event.target.value === 'left') {
item.style.transform = 'translateX(-50px)';
} else if (event.target.value === 'right') {
item.style.transform = 'translateX(50px)';
}
});
3. よくある失敗例とその改善策
a. ドラッグ操作のみに依存する
失敗例
- 要素を移動する機能がドラッグ操作のみに依存している。
改善策
- ボタンやメニューで操作可能な代替手段を提供。
b. ドラッグ操作の代替手段が提供されていない
失敗例
- ドラッグでのみ範囲選択が可能であり、他の操作方法がない。
改善策
- クリックまたはキーボードで範囲選択を可能にする。
4. アクセシビリティのメリット
a. 操作性の向上
- ドラッグ操作が難しいユーザーでも、簡単に操作できるようになります。
b. 誤操作の防止
- 小さな画面や不安定な環境での誤操作を軽減します。
c. ユーザー体験の向上
- 複数の操作方法を提供することで、より直感的で柔軟な体験が可能になります。
5. テスト方法
a. 手動テスト
- ドラッグ操作が必要な機能について、代替手段が提供されているか確認。
- クリックやキーボード操作で同じ機能を実行可能かテスト。
b. 自動テストツール
- AxeやWAVEを使用して、ドラッグ操作が必須でないことを検証。
まとめ
WCAG 2.2の「2.5.7 ドラッグ操作」は、ドラッグ操作が難しいユーザーのために、単一ポインターで操作可能な代替手段を提供することを目的としています。
実装ポイント
- ボタンやクリックで代替可能なインターフェースを提供する。
- ドラッグ操作に依存しない設計を採用する。
- ユーザーの多様なニーズに応じた柔軟な操作方法を提供する。
これにより、すべてのユーザーが操作しやすいアクセシブルなウェブコンテンツを実現できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。