WCAG 2.2 ガイドライン「2.5.1 ポインター操作のジェスチャー」Level A について
はじめに
WCAG 2.2の「2.5.1 ポインター操作のジェスチャー」は、複数の指を使用したり、特定のパスを描くジェスチャーを必要とする操作に対して、単一のポインター（例: 1本の指やマウスクリック）でも操作可能な代替手段を提供することを求めています。この基準は、特にモバイルデバイスやタッチスクリーンでの操作性を向上させるために重要です。
1. 基準の概要
要件
- マルチポイント（例: ピンチズーム）やパスに基づくジェスチャー（例: スワイプ）で操作可能なすべての機能について、単一のポインター（例: 1本の指やマウスクリック）でも同様の操作ができるようにする。
- マルチポイントやパスベースのジェスチャーが本質的に必要な場合を除き、この基準を満たす必要があります。
2. 実装方法
a. 単一ポインター操作を提供する
マルチポイントやパスベースの操作に加えて、単一ポインターでも同じ操作が可能なコントロールを提供します。
例: スワイプとボタン操作の両方を提供
HTML
<div>
<button id="prev">前へ</button>
<button id="next">次へ</button>
</div>
<div id="carousel">
<!-- コンテンツ -->
</div>
JavaScript
const carousel = document.getElementById('carousel');
const prevButton = document.getElementById('prev');
const nextButton = document.getElementById('next');
// スワイプ操作
carousel.addEventListener('touchstart', handleTouchStart);
carousel.addEventListener('touchmove', handleTouchMove);
// ボタン操作
prevButton.addEventListener('click', () => moveCarousel('prev'));
nextButton.addEventListener('click', () => moveCarousel('next'));
function moveCarousel(direction) {
if (direction === 'prev') {
console.log('前のスライドへ移動');
} else {
console.log('次のスライドへ移動');
}
}
- スワイプ操作とボタン操作の両方を提供することで、ユーザーは好きな方法を選択できます。
b. スライダーの単一ポインター操作
スライダーのドラッグ操作に加えて、ボタンやキーボードでの操作も提供します。
例: スライダーの代替操作
HTML
<div>
<button id="decrease">-</button>
<input type="range" id="slider" min="0" max="100" step="1">
<button id="increase">+</button>
</div>
JavaScript
const slider = document.getElementById('slider');
const decreaseButton = document.getElementById('decrease');
const increaseButton = document.getElementById('increase');
// ボタン操作
decreaseButton.addEventListener('click', () => {
slider.value = Math.max(slider.min, slider.value - slider.step);
});
increaseButton.addEventListener('click', () => {
slider.value = Math.min(slider.max, parseInt(slider.value) + parseInt(slider.step));
});
- ドラッグ操作だけでなく、ボタンを使用して値を変更できるようにします。
c. カスタムジェスチャーの代替手段を提供
マルチポイントやパスベースのジェスチャーが必要な場合でも、シンプルなクリック操作で同じ結果を得られるようにします。
例: 円を描くジェスチャーの代替操作
問題例
- 円を描くジェスチャーで特定のアクションを実行。
改善策
- 「実行」ボタンを追加して、円を描く代わりにクリック操作で同じアクションを提供。
<button id="execute">実行</button>
3. よくある失敗例とその改善策
a. マルチポイント操作のみを提供
失敗例
- ピンチズームでのみ画像を拡大・縮小。
改善策
- ズームイン・アウトのボタンを提供する。
<button>ズームイン</button>
<button>ズームアウト</button>
b. パスベースのジェスチャーが必須
失敗例
- スワイプ操作でのみページを切り替え可能。
改善策
- ボタンやリンクを追加して、単一ポインターでの操作を可能にする。
4. アクセシビリティのメリット
a. 多様なユーザーへの対応
- 手の不自由なユーザーや、デバイスがジェスチャーに対応していないユーザーにも配慮できます。
b. ユーザー体験の向上
- 簡単な操作方法を提供することで、すべてのユーザーが快適に操作できます。
c. デバイス間の互換性
- マウスやキーボード操作でも同じ機能を利用できるため、プラットフォームを問わず使いやすくなります。
5. テスト方法
a. 手動テスト
- すべての操作が単一ポインターで実行可能か確認。
- マウスやタッチスクリーンを使用して動作をテスト。
b. スクリーンリーダーテスト
- スクリーンリーダーで提供される代替操作が正しく動作するか確認。
c. 自動テストツール
- AxeやWAVEを使用して、ジェスチャーの代替操作が適切に提供されているか検証。
まとめ
WCAG 2.2の「2.5.1 ポインター操作のジェスチャー」は、すべての操作が単一ポインターで実行可能であることを保証することを目的としています。
実装ポイント
- マルチポイントやパスベースのジェスチャーに加え、単一ポインター操作を提供する。
- スライダーやカスタムジェスチャーには代替手段を用意する。
- 操作がすべてのデバイスで一貫して動作することを確認する。
これにより、アクセシブルで直感的な操作を提供し、すべてのユーザーにとって使いやすいウェブコンテンツを構築できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。