ボタンで代われないピンチ・ドラッグ・傾きのジェスチャー

生活雑貨のショップが、ホーローのマグを360度ビューで見せています。周りから30度ごとに撮った12枚の写真です。写真の下には「ドラッグで回転、ピンチで拡大」とあります。横にドラッグするとマグが回ります。スマートフォンで2本の指を広げると拡大し、拡大した後はドラッグで写真を動かして、背面の小さな表示を読めます。スマートフォンでは、ページを開いたときから、傾けるとマグが回ります。ボタンはありません。マウスでは拡大がまったくできず、マグの背面を見るにはドラッグするしかありません。スマートフォンをスタンドに置いたり、ふるえる手で持ったりすると、マグは回り続けます。

どの操作もジェスチャーにしかなく、専用の操作要素がありません。ピンチは複数のポインターを使うジェスチャーで、WCAG 2.5.1は、それを使う機能が、1つのポインターで、軌跡なしでも使えることを求めています。たとえば「拡大」ボタンのタップです。失敗例F105は、この代わりの方法がない状態を挙げています。マグを回すことと、拡大した写真を動かすことは、ポインターを押したまま動かす必要があるドラッグ操作です。2.5.7は、同じことを1回ずつのクリックやタップでもできるようにすることを求めています（F108）。傾きは端末の動きで、2.5.4は2つのことを求めています。同じことができる操作要素と、動きへの反応をオフにする方法です（F106）。スマートフォン自体の動きの入力に関する設定を、ブラウザーはページに伝えないため、そのスイッチはページ上に必要です。

スマートフォンでは、ビューが画面の幅いっぱいになることがよくあります。touch-action: none があると、写真の上に置いた指ではページもスクロールできません。マグを通り過ぎて価格を見たいだけの人も、ジェスチャーに捕まってしまいます。

10グループ中4グループに影響

• 全盲 （影響あり）
• 弱視 （影響なし）
• 色覚 （影響なし）
• ろう （影響なし）
• 難聴 （影響なし）
• 発話 （影響なし）
• 手の操作 （影響あり）
• 届く範囲・力 （影響あり）
• 認知 （影響あり）
• 光過敏 （影響なし）

• 手の操作が限られる 指1本、スタイラス、マウススティック、ヘッドポインター、マウスで操作する人はポインターが1つしかないため、ピンチができません。スイッチや音声操作の利用者は、押したままドラッグすることもできません。ページには、ジェスチャーなしで商品を回したり拡大したりする方法がありません。
• 届く範囲・力が限られる 手がふるえると、スマートフォンが動くたびにマグが回り、車いすのホルダーに固定したスマートフォンでは、揺れるたびに回ります。2本の指を安定させてピンチしたり、ちょうどの角度までドラッグしたりするのは、力の弱い手や疲れた手には大変です。
• 視覚を使わない VoiceOverやTalkBackがオンのときは、写真の上のドラッグやピンチはページではなくスクリーンリーダーに渡るため、商品を回すことも拡大することもできません。それができることも、ページのどこにも示されていません。
• 言語・認知・学習の能力が限られる 説明にはドラッグとピンチしか書かれておらず、傾きのことはありません。スマートフォンが動くと商品が勝手に回るので驚き、止める方法もありません。

マークアップは、代替テキストとキャプションのある figure の中の画像で、どの自動チェックも合格にします。ピンチやドラッグのハンドラー、deviceorientation のリスナーは、DOMに何も残しません。この診断はブラウザーにページのリスナーを問い合わせ、端末の動きや向きを監視しているページと、touch-action: none ですべてのタッチを自分で受け取り、中にも横にもボタンがない大きな画像やcanvasを報告します。どちらも人が確認するための手がかりです。ジェスチャーごとに別の方法があるかは、ビューを実際に試して初めて分かります。修正をAIに頼むと、ビューをフォーカスできるようにして矢印キーで回すことがよくあります。キーボード利用者には役立ちますが、マウスや指1本の人はやはりドラッグとピンチが必要です。ほかにも、できないジェスチャーをスクリーンリーダー利用者に伝えるだけの aria-label="Drag to rotate" を付けたり、prefers-reduced-motion のときだけ傾きを止めたりします。この設定は画面のアニメーションのためのもので、設定を見つけた人にしか効かず、ボタンもないままです。