ドラッグでしか並べ替えられない？上へ・下へでも希望順を変える確認方法

ドラッグ以外でも、同じ希望順へ変えられる方法を用意する

希望先を動かすために、押したまま引きずる操作を必須にしないようにします。「上へ」「下へ」をクリック・タップする方法でも同じ希望順へ変更できるようにし、キーで使えるかは別に確かめます。

架空の地域イベント運営会社で、Web担当者が申込ページを検討する場面です。来場者は「見学会・相談会・体験会」の希望順を変えたいのに、下書きにはカードをドラッグする案しかありません。指を押したまま狙った位置へ運ぶ動作が難しい人にも、同じ用事を果たせる入口が必要です。

三つの操作を混同しない

ドラッグ

対象を押した状態のまま動かし、移動先で離す操作です。カードの位置を変えるために、この連続した動きを要求するかを見ます。

クリック・タップで一つずつ動かす

対象の「上へ」を一回押すなど、引きずらない一つの指やポインターによる操作です。移動先を一回選ぶ方法なども考えられますが、元の並べ替えと同じ機能を果たすことが必要です。

キーボードで動かす

Tabキーなどで対象の操作へ進み、キーで変更します。マウスやタッチで押せるボタンがあるだけで、この結果まで確認できたことにはしません。

W3Cの達成基準2.5.7の解説は、作成者が提供するドラッグ機能について、ドラッグしない単一ポインターでも実現できることを扱います。ドラッグが本質的な場合や、作成者が変更していないブラウザー等の機能には例外があります。通常のページスクロールまで一律に禁止する話ではありません。

キーボードは2.1.1の解説で別に扱われます。キーだけの代替を付けてもドラッグしないクリック・タップの確認の代わりにはならず、逆も同じです。WCAGの個別条件の説明であり、この記事だけで会社サイト全体の適合や国内の法的義務を判断するものではありません。

二つの下書きは、ボタンの有無と未確認を近くで比べる

「ドラッグだけの案」と「上へ・下へを付ける案」は別の下書きです。ボタンを置く提案は、実装・操作・保存が成功した結果ではありません。

初期の並びは、どちらも「見学会 → 相談会 → 体験会」として説明します。この矢印は文字を読む順番です。実際に処理が進んだ記録ではありません。

最初の案で代替ボタンがないことは、実サイトで操作不能を観測した記録ではありません。また、キー操作の結果がないことを「キーでは使えない」とも読み替えません。二つ目を最初の修正後と呼ばず、提案を比較する材料として扱います。

補足には、原票の初期位置、二案の値、説明用の期待順序、残る確認点を載せています。期待順序が書かれていても、未取得の表示順・保存順が埋まったことにはなりません。

「体験会の上へ」と、変わる位置を対応させる

体験会を一つ上へ動かすなら、体験会の行にある「上へ」を使う設計にします。説明上の期待順序は「見学会・体験会・相談会」です。どの行のどの操作かを、見た目と名前の両方で追えるようにします。

「上へ」だけが何個も離れて並ぶと、どの希望先を動かすか分かりにくくなります。各希望先の隣に置き、対象名と操作の関係が読み順でも伝わる構成を検討します。プログラムから識別する名前にも対象を含めるなら、見えている「上へ」という言葉との対応を保ってください。名前を付けたことと、実際の読み上げ結果は分けます。

体験会を一つ上へ動かすとき、どの行のボタンを使い、どこで並びを読むでしょうか。

原寸画像を開く

体験会の上へという案と期待順序を対応させ、実際の表示・保存や端での扱いは本文の手順で別々に確かめます。

一回の変更を、短い手順で照合する

1. 対象を読む。変えたいものが体験会で、初期位置が三番目という説明を確かめます。
2. 同じ行の操作を使う。体験会の「上へ」を一回押す設計です。相談会の行の操作と取り違えない配置にします。
3. 並び全体を読み直す。説明用の期待順序は見学会、体験会、相談会です。体験会だけが動いたように見えることより、三つの順序を照合します。
4. 確認画面と保存を別に見る。画面で変えた順序が、その後の確認・保存にも引き継がれるかは別工程で確認します。

図は、対象の希望先、使うボタン、読み直す並びの対応を示します。原票の期待順序を説明したもので、図にその並びがあることを実操作の成功や保存済みの証拠にはできません。原画の細部と補足全文は、図の近くから読み直せるようにします。

同等の方法は上へ・下へに限りません。W3CのG219には、ボタン等で代替する考え方があります。順番を指定する方法を選ぶ場合も、元の機能と同じ希望順を作れ、対象と結果を理解できるかを確認します。これは実装方法の例であり、特定の見せ方だけを必須とする説明ではありません。

先頭・末尾と、操作後の行き先を決める

先頭をさらに上へ、末尾をさらに下へ動かす操作をどう扱うかを決めます。変更後も、どの希望先を操作したかと次に何ができるかを見失わないようにします。

動かせない方向を分かる形にする

先頭の「上へ」や末尾の「下へ」を無効にする方法、表示しない方法などが考えられます。どちらを採るかは、対象の使い方、見える説明、キーでの移動、支援技術で伝わる状態を合わせて検討します。原票では、その扱いは未確認です。端に来たら循環して反対側へ移る、何も起きず保存する、といった動作を勝手に補いません。

無効な操作を示すなら、色の薄さだけで意味を伝えず、対象の位置やできない方向が分かる説明を検討します。非表示にするなら、並べ替え後に操作の位置や数が変わっても利用者が対象を追えるかを見ます。外観を一枚確認しただけでは、その変化やキー操作は判定できません。

フォーカスと読み上げは、順序とは別に確認する

キーで移動したときの選択位置をフォーカスと呼びます。体験会を動かした後、どこへフォーカスが残り、次の操作へ進めるかを確かめます。見えている並びだけを変え、操作対象や読み順が前の状態のままにならないよう、実装担当が構造も確認する必要があります。

必要な変更の通知をどう伝えるかも検討します。読み上げる文章を用意しただけでは、使用する支援技術で適切に伝わった結果にはなりません。移動後の位置、読み上げ、確認画面と保存順は、この架空原票では未確認のままです。

フォーカスが見えない問題は、Tabキーの移動先とフォーカス表示を確かめる方法の対象です。本稿は、見える印の確認だけで終えず、希望順を変える操作と結果までを結びます。

クリック・タッチ・キーと、確認・保存を分けて試す

許可された確認環境で、同じ対象と初期順序から試します。クリック・タッチで引きずらずに変えられるか、キーで使えるか、確認画面と保存が一致するかを、それぞれ結果として残します。

1. 条件をそろえる。確認先、ページの版、端末・ブラウザー、初期順序を控えます。別案や別条件を修正前後として混ぜません。
2. ドラッグせず操作する。対象の体験会の「上へ」をクリックし、タッチでは一回のタップで同じ用事を果たせるかを確認します。押したまま移動する必要が残っていないか、スワイプだけの代替になっていないかを見ます。
3. キーで別に操作する。Tabで必要な入口へ到達し、選択位置が見え、ボタンを作動させられるかを確かめます。標準のボタンで一般的なEnter・Spaceの操作も具体的な確認候補にしますが、両キーを一律の規格必須条件と断定しません。
4. 並びと行き先を読む。期待順序、端での操作、フォーカス、必要な通知を確認します。クリックで動いた結果を、キーや読み上げでも動いた結果へ写しません。
5. 確認・保存を照合する。確認画面に進む設計なら、そこで三つの順序を再確認します。保存後に再表示する設計では、その保存値と表示順も確認します。テスト送信等が必要な場合は、事前に確認範囲と送信先の許可をそろえます。

画面で体験会が二番目に見えたとしても、それだけで保存順や受付結果まで一致するとは限りません。入力画面、確認画面、保存後を分け、どの時点まで実際に確かめたかを伝えます。この本文は方法の説明であり、申込・保存・送信を実施した報告ではありません。

操作できなかった場合は、対象の希望先、使ったボタンやキー、開始時の順序、操作直後に見えたものを実装担当へ伝えます。確認環境で再現条件をそろえ、変えた箇所だけを同じ方法で再確認してください。原因を未確認の段階で、ブラウザーや利用者の操作ミスへ決めつけません。

まとめ：対象の行から変更し、表示と保存を別々に確認する

ドラッグだけにせず、クリック・タップでも同じ希望順を作れる方法を用意します。対象の隣の操作と期待順序を対応させ、キー操作、端での扱い、フォーカス、確認画面、保存を別々に確かめてください。

• 体験会の「上へ」を使う説明では、期待順序は見学会・体験会・相談会です。実際の変更結果ではありません。
• ボタン付きの案は提案中です。別案を修正後と呼ばず、未確認の操作や保存を成功・失敗へ埋めません。
• クリック・タップの代替とキーボードの利用は両方を検討します。一方の確認で、もう一方やサイト全体の適合を代行しません。

最初の一歩：並べ替えたい一つの対象を選び、「どの希望先の、どの操作で、どの順序へ変えるか」を制作者と具体的にそろえてください。その後、端の扱い、操作後の行き先、確認・保存までを許可された環境で確かめます。

発注時に検査範囲と結果の出し方を整理する場合は、システムのアクセシビリティ検査範囲を決める方法も参照できます。会社サイトの操作をどこから見直すか相談する場合は、Webサイトの支援相談へ対象と確認条件を伝えられます。この記事を読んだことは、申込や問い合わせが送信された結果ではありません。