華やかなジェスチャーを唯一の入口にしない
カードをマウスで移す操作は自然に見えます。しかし実際には、ボタンを押し続け、対象を見失わず、狭い移動先に合わせる必要があります。スマートフォンではページのスクロールと競合することもあります。そこで、まず目的を言葉にします。順序を変える、値を選ぶ、別の画像を見る。ドラッグはその目的を達成する方法の一つであり、目的そのものではありません。使いやすい人には残しつつ、全員に細かな動きを求めない設計が大切です。
二つの方法で同じ結果を得られるように
並べ替えの一覧なら、選択した項目のそばに「上へ」「下へ」を用意できます。グループ間の移動には移動先の選択肢が適しています。スライダーには正確な値の入力欄や段階的に増減するボタンを添えられます。ギャラリーには通常の前後ボタンを残します。どの方法も同じデータを更新し、同じ制約を守り、結果を同じように伝える必要があります。一覧の最初や最後でどうなるかも説明しましょう。見た目だけの代替操作では問題は解決しません。
アクセシビリティ要件を正しく捉える
WCAG 2.2の達成基準2.5.7は、ドラッグを使う機能について、単一のポインターでドラッグせずに操作できる方法を求めています。ドラッグが本質的に必要な場合や、変更していないユーザーエージェントの動作には例外があります。キーボード操作だけを用意しても十分ではありません。タッチ画面の利用者が物理キーボードを使えるとは限らないからです。キーボード対応は別に確認すべき事項で、マウスを使わないナビゲーションでも説明しています。ブラウザー本来のスクロールと、サイト独自のドラッグ機能は区別します。
アニメーションより、完了できるかを確かめる
三つの項目を、押したまま動かさず、短いクリックやタップだけで並べ替えてください。続いてキーボードとスマートフォンでも試します。選択した項目と移動後の場所は分かるでしょうか。間違いを修正できるでしょうか。代替操作をホバー時だけ表示しないことも重要です。操作同士の間隔と、支援技術に伝わるボタン名も確認します。私たちが重視するのはアニメーションの数ではなく、同じ目的へ進む分かりやすい道が複数あることです。この部品の確認だけで、サイト全体のアクセシビリティを証明したことにはなりません。
変更後の状態まで設計する
移動できたことを色だけで示さず、項目の位置や短い説明でも伝えます。並べ替えが保存されるのか、一時的な表示だけなのかも明確にします。途中で操作をやめた場合にデータがどうなるかを決め、元に戻す道が必要か検討しましょう。代替ボタンは補助的な飾りではなく、通常の操作として同じ品質で扱います。