アクセス可能な並べ替え可能なリストを作成する際の課題を探る (ドラッグ アンド ドロップ)

ドラッグ アンド ドロップは、非常にインタラクティブで視覚的なインターフェースです。ファイルのアップロード、ブラウザのブックマークの並べ替え、ソリティアでのカードの移動などのタスクを実行するために、ドラッグ アンド ドロップを使用することがよくあります。マウスなしでこれらのタスクのほとんどを完了することは想像しがたいことであり、画面や視覚補助なしで完了することはさらに困難です。そのため、GitHub のアクセシビリティ チームはドラッグ アンド ドロップを「リスクの高いパターン」と見なし、アクセシビリティの障壁や業界での効果的なソリューションの欠如につながることが多いと考えています。

最近、私たちのチームは、よりアクセスしやすい並べ替え可能なリストのソリューションの開発に取り組みました。私たちはこれを「1 次元ドラッグ アンド ドロップ」と呼んでいます。ドラッグ アンド ドロップをよりアクセスしやすくするための最初のステップとして、私たちは単一の軸に沿ってアイテムを移動する方法を模索することに取り組みました。

調査結果に基づいて、私たちが直面した課題とその解決方法をいくつかご紹介します。

課題: スクリーンリーダーは矢印キーを使用してコンテンツを移動します

課題: NVDAはユーザーがEnterまたはSpaceを押したときにマウスイベントをシミュレートします

私たちが直面したもう一つの課題は、マウスまたはキーボードのイベントがトリガーされたかどうかを判断することでした。 NVDAスクリーンリーダー ユーザーがドラッグアンドドロップをアクティブ化しました。

ユーザーがマウスを使ってアイテムをドラッグアンドドロップする場合、マウスボタンを放すと（ onMouseUp イベント）はドラッグ アンド ドロップ操作を確定します。一方、キーボードでドラッグ アンド ドロップを操作する場合は、Enter キーまたは Escape キーを使用してドラッグ アンド ドロップ操作を確定します。

注意します: ユーザーがNVDAの使用中にEnterキーまたはSpaceキーでボタンをアクティブにすると、スクリーンリーダーは onMouseDown そして onMouseUp イベントではなく onKeyDown イベント。

ほとんどのNVDAユーザーはマウスではなくキーボード操作でドラッグアンドドロップを操作するため、コードが onMouseUp NVDA の Enter キーまたは Space キーの押下によってトリガーされるイベント。

これを実現するために、キーボードとマウスの機能を分離する 2 つの HTML 要素を使用しました。
1. ア プライマーアイコンボタン キーボード操作を処理します。
2. マウス操作をキャプチャするための目に見えないオーバーレイ。

マウス イベントを処理するために iconButton をオーバーレイします。これはフォーカス可能ではなく、キーボード ユーザーには表示されません。関連するイベント ハンドラー: onMouseDown”。2 番目のテキスト ボックスでは、表示される iconButton の目的について説明し、次のように述べています。「iconButton はキーボード ユーザーのみがアクティブ化できます。マウス ユーザーはクリックできません。 関連イベント ハンドラー: onMouseDown、onKeyDown。” width=”1024″ height=”750″ class=”aligncenter size-full wp-image-78698 width-fit” loading=”lazy” srcset=”https://github.blog/wp-content/uploads/2024/07/image2.png?resize=1024%2C750?w=1576 1576w、https://github.blog/wp-content/uploads/2024/07/image2.png?resize=1024%2C750?w=300 300w、https://github.blog/wp-content/uploads/2024/07/image2.png?resize=1024%2C750?w=768 768w、 https://github.blog/wp-content/uploads/2024/07/image2.png?resize=1024%2C750?w=1024 1024w、https://github.blog/wp-content/uploads/2024/07/image2.png?resize=1024%2C750?w=1536 1536w” sizes=”(max-width: 1000px) 100vw, 1000px” data-recalc-dims=”1″ />

課題: 動きを次々に発表する

キーボード操作がうまくいった後、次の大きな障害は ユーザーに動きを知らせる特に、選択した項目の急速な移動を通知します。

外部ユーザー テストの準備として、スクリーン リーダーを使用してアナウンスをテストしました。私たちはスクリーン リーダーをネイティブに使用していないため、ページ内で項目をゆっくりと移動し、アナウンスは良好に聞こえました。ただし、ユーザーは通常、タスクをすばやく完了するために項目をすばやく移動するため、スクリーン リーダー テストでは、ユーザーが実際に機能を操作する方法が反映されませんでした。

注意します: ユーザーテストを行って初めて、ユーザーがアイテムを素早く連続して動かすと、 aria-live アナウンスが遅れたり、時にはもはや関係のない動きをアナウンスしたりすることがありました。これにより、ユーザーは混乱し、アイテムの現在の位置について混乱を招きました。

この問題を解決するために、私たちは移動のアナウンスに小さなデバウンスを追加しました。私たちはユーザーとさまざまなデバウンス速度をテストし、ドラッグアンドドロップでのユーザーの操作能力を低下させないように100msに落ち着きました。さらに、 aria-live="assertive" 古い位置アナウンスが新しい位置アナウンスによって中断されるようにするためです。

export const debounceAnnouncement = debounce((announcement: string) => {
  announce(announcement, {assertive: true})
}, 100)

メモを取る: aria-live="assertive" 時間的制約のある通知や重要な通知のために予約されています。 aria-live="assertive" スクリーンリーダーが行っているアナウンスを中断し、ユーザーの邪魔になることがあります。 aria-live="assertive" 控えめに使用し、スクリーン リーダー ユーザーでテストして、機能が正しく機能することを確認します。

課題: 新しいパターンの初めてのユーザー体験

注意します: ユーザー テスト中に、一部のユーザーがキーボードでドラッグ アンド ドロップの操作が難しいと感じていることがわかりました。多くの場合、ドラッグ アンド ドロップはキーボードやスクリーン リーダーではアクセスできません。その結果、障害のあるユーザーはこれまでドラッグ アンド ドロップを使用する機会がなかった可能性があり、操作に不慣れな場合があります。

この問題を解決するのは特に困難でした。なぜなら、私たちは、ドラッグ アンド ドロップ機能を頻繁に使用するユーザーにとって、指示セットが簡単に見つけられるようにしつつ、常に気を散らさないようにする必要があったからです。

この問題に対処するため、ユーザーがキーボードでドラッグ アンド ドロップをアクティブにしたときに開く、一連の手順が記載されたダイアログを追加しました。このダイアログには、「今後表示しない」チェックボックスがあり、操作方法を十分に理解したためリマインダーは不要になったユーザーのために用意されています。

私たちが直面した最後の大きな課題の1つは、音声制御補助技術を使用してドラッグアンドドロップを操作することでした。 音声制御 スクロールできないリスト内で項目をドラッグ アンド ドロップするのは簡単でしたが、リストがスクロール可能になると、項目をリストの上から下へ移動することはほぼ不可能になりました。

注意します: 音声コントロールは、要求されると、画面上のインタラクティブな項目の横に数字のオーバーレイを表示します。これらの数字は、ユーザーが操作できる項目への参照です。たとえば、ユーザーが「項目 5 をクリックしてください」と言うと、項目 5 が Web ページ上のボタンであるため、支援技術はボタンをクリックします。これらの数字の参照は、ユーザーが Web ページをスクロールすると動的に更新されます。参照はユーザーのスクロールに応じて更新されるため、数値参照を介して項目をドラッグしながらページをスクロールすると、項目がドロップされます。

音声制御ユーザーがリスト内の項目を並べ替えられるようにするには、2 つの操作モードをサポートすることが重要であることがわかりました。最初の操作モードである従来のドラッグ アンド ドロップについては、すでに説明しました。2 番目のモードは移動ダイアログです。

移動ダイアログは、従来のドラッグ アンド ドロップを使用せずにリスト内の項目を移動できるフォームです。

フォームには、アクションと位置の 2 つの入力フィールドが含まれています。
アクション フィールドでは、操作の移動または方向を指定します (例: 「アイテムを前に移動する」または「アイテムを後に移動する」)。位置では、アイテムを移動する場所を指定します。

入力フィールドの下には、入力値に基づいてアイテムがどこに移動するかのプレビューが表示されます。このプレビューは、 aria-live ユーザーが動きを確定させる前にプレビューできる方法を提供します。

テスト中に、音声制御支援技術を使用していないユーザーの中には、移動ダイアログが操作モードとして好まれていることがわかりました。ユーザーは移動ダイアログを使用してアイテムを移動する際に、より自信を持っており、当社のアクセシビリティ機能が幅広いユーザーに予想外のメリットをもたらしていることがわかってうれしく思いました。

まとめると、アクセシブルなドラッグ アンド ドロップ パターンを作成するのは難しく、フィードバックを活用し、さまざまなユーザーのニーズを考慮することが重要です。アクセシブルなドラッグ アンド ドロップを作成しようとしている場合は、この旅が、この複雑なパターンのニュアンスと落とし穴を理解するのに役立つことを願っています。

同僚の皆さんに心から感謝します。 アレクシス・ルシオ、 マット・ペンス、 フサム・ガッツィ、 そして アーリヤBC、ドラッグ アンド ドロップをより使いやすくするための努力に感謝します。皆さんの献身と専門知識は計り知れないほど貴重です。私たちが成し遂げた進歩と、これから達成できることに興奮しています。

最後に、ドラッグアンドドロップの将来を私たちと一緒にテストすることに興味がある場合は、 顧客調査パネルに参加する。