マウスでしか動かせないドラッグ＆ドロップのボード

カードを動かす方法はドラッグだけです。リスト項目はフォーカスも押すこともできず、ドロップの処理でカードが移っても、何も読み上げられません。

ドラッグは使いたい人のために残し、各カードに、移動できる列ごとのボタンを加えます。ボードには最初からステータス領域があり、ドラッグでもボタンでも、移動のたびにスクリプトが書き込みます。

どのボタンも、1回のクリック、タップ、キー操作でカードを移動します。音声操作では「作業中へ移動をクリック」と言えます。カードの題名はボタンの説明として読まれるので、表示名を変えずに、どのカードを動かすボタンか伝わります。移動後、フォーカスは移動先のカードに移り、ステータス行が移動先を伝えます。列が少ないボードに向いています。3〜4列を超えると、ボタンでカードが窮屈になります。

移動ボタンと「移動先」のリストは、どちらもそれだけで、キーボード、ポインター、スクリーンリーダーの利用者に対応できます。移動ボタンは1回押すだけで見つけやすい反面、すべてのカードに列の数だけボタンが増えるため、3〜4列のボードに向いています。「移動先」のリストは2段階になりますが、列が増えても大きさは変わらず、位置も選ばせられるため、大きなボードに向いています。キーボードドラッグは、キーボード利用者がもっと速い方法を求めるときに、ほかの方法と並べて加える価値があります。

ドラッグは残してください。できる人にとっては速い方法で、2.5.7が求めるのは代わりの方法であり、置き換えではありません。ドラッグはカードに、操作要素はその中に置き、ボタンを押してもドラッグが始まらないようにします。

操作要素はカードに常に表示しても、1つの「移動」ボタンから開くメニューに入れてもかまいません。メニューは見た目がすっきりしますが、作って確認するパターンがもう一つ増えます。ホバーではなく、クリックとキーボードで開くようにしてください。

カードを移動するとマークアップも移るため、フォーカスには注意が必要です。

• 描き直されるカード：フレームワークは、カードを消して移動先の列に作り直すことが多く、フォーカスがbodyに落ちる。移動後に、新しいカードの最初の操作要素へ自分でフォーカスを移す。
• 最後の列：カードが「完了」に移ると、フォーカスしていたボタンがなくなることがある。今いる列へのボタンではなく、カードに残った最初の操作要素へフォーカスを移す。
• 取り消し：移動を取り消せる場合は、「元に戻す」をカードかステータス行に置き、フォーカスのある場所の近くにする。

ステータスメッセージは移動1回につき1つにし、列と同じ言葉で短く書きます。たとえば「リリースノートを書くを完了へ移動しました。」です。マウスでドラッグしている途中は知らせず、結果を知らせます。