WCAG 2.2 ガイドライン「2.5.4 モーション操作」Level A について
はじめに
WCAG 2.2の「2.5.4 モーション操作」は、デバイスやユーザーの動き（例: シェイクや傾ける操作）によって実行される機能が、ユーザーインターフェースコンポーネント（例: ボタン）でも操作可能であること、およびモーションによる操作を無効化できる設定を提供することを求めています。この基準は、誤操作を防ぎ、動作による操作が難しいユーザーにも対応することを目的としています。
1. 基準の概要
要件
- デバイスのモーション（例: シェイク、デバイスの傾き、回転）による機能は、代替手段（ボタンやスライダーなどの従来のUI要素）で実行可能にする必要があります。
- モーション操作が不要または無効にできる設定を提供します。
- **モーション操作が不可欠な場合（例: 歩数計）**には例外が適用されます。
2. 実装方法
a. 従来のUIコンポーネントを提供する
モーション操作に加えて、ボタンやスライダーなどのインターフェースでも同じ機能を提供します。
例: デバイスをシェイクしてリセットする代わりにボタンを提供
HTML
<button id="resetButton">リセット</button>
JavaScript
document.getElementById('resetButton').addEventListener('click', () => {
console.log('リセットが実行されました');
});
b. モーション操作を無効にする設定を提供する
ユーザーがモーション操作を無効化できるオプションを用意します。
例: モーション操作のオン/オフを切り替える設定
HTML
<label>
<input type="checkbox" id="motionToggle"> モーション操作を有効にする
</label>
JavaScript
let motionEnabled = true;
document.getElementById('motionToggle').addEventListener('change', (event) => {
motionEnabled = event.target.checked;
});
window.addEventListener('deviceorientation', (event) => {
if (motionEnabled) {
console.log('モーション操作が有効です');
}
});
c. システム設定に準拠する
デバイスのシステム設定（例: アクセシビリティのモーション軽減オプション）を尊重します。
例: CSSでの動作軽減設定
CSS
@media (prefers-reduced-motion: reduce) {
.animation {
animation: none;
}
}
3. よくある失敗例とその改善策
a. モーション操作のみを提供
失敗例
- デバイスをシェイクすることでのみリセット可能。
問題点
- モーション操作が苦手なユーザーや、モーションセンサーが無効な環境では使用できない。
改善策
- ボタンやメニュー項目など、代替手段を提供。
b. モーション操作を無効にできない
失敗例
- モーション操作が常に有効で、無効化の設定がない。
問題点
- 誤動作や不便さを引き起こす可能性がある。
改善策
- 設定画面でモーション操作を有効/無効に切り替える機能を提供。
4. アクセシビリティのメリット
a. 誤操作の防止
- モーション操作を無効化できることで、意図しない動作を防げます。
b. 多様なユーザーへの対応
- 動きに制約があるユーザーや、安定した環境で操作したいユーザーも含めて利用可能になります。
c. ユーザー体験の向上
- 従来のUIと併用することで、操作方法が多様になり、選択肢が増えます。
5. テスト方法
a. 手動テスト
- モーション操作と従来のUI操作の両方で同じ機能が実行可能か確認。
- モーション操作を無効化できる設定が動作するか確認。
b. スクリーンリーダーテスト
- モーション操作の代替UIが正しく認識されるか確認。
c. 自動テストツール
- AxeやWAVEを使用して、モーション操作が適切に実装されているか検証。
まとめ
WCAG 2.2の「2.5.4 モーション操作」は、モーション操作に代わる従来のUI手段を提供し、誤動作を防ぐためにモーション操作を無効化できる設定を提供することを目的としています。
実装ポイント
- モーション操作の代替となるUIコンポーネントを提供する。
- モーション操作を無効化する設定を実装する。
- システム設定（例: 動作軽減）を尊重する。
これにより、すべてのユーザーにとって安全で快適な操作を提供できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。