web-dev-qa-db-ja.com

WCAGに準拠したドラッグアンドドロップUI開発テクニックはありますか？

ソフトウェアアプリケーション（特にWebアプリ）でドラッグアンドドロップUI機能をWCAGに準拠させる設計またはコーディング手法があるかどうか誰かが知っていますか？

ドラッグアンドドロップ機能をキーボードのみのユーザーに実装するのは難しいことに気づきました。これが、ドラッグアンドドロップ機能がアクセシビリティの目的で嫌われている主な理由です（ https：//www.w3。 org/WAI/intro/aria ）。

ドラッグアンドドロップ機能を含めるためのWCAG準拠のソリューションがあったかどうかだけに興味があります。フィードバックを事前にありがとう。

web-appaccessibilitydrag-n-drop
3
Fuzzy Analysis

この質問への答えは、あなたのデザインが見えなければ難しいでしょう。

まず、WCAGは2.1で「キーボードからすべての機能を利用できるようにする」と明記しています。マウスのドラッグアンドドロップに関しては、これには明らかに多くの課題があります。

HTMLにARIA属性を追加してドラッグアンドドロップのキーボード操作を追加できますが、これはキーボードの使用に関する問題を解決するための特効薬ではありません。ドラッグアンドドロップのすべての要素を十分に理解して初めて、キーボードユーザーをサポートする方法を理解できるようになります。

Bill Scott＆Theresa Neilは、彼らの著書「Designing Web Interactions」で、ドラッグアンドドロップ操作中にユーザーをキューに入れるための15のイベントを特定しました。

  • ページの読み込み
  • マウスホバー
  • マウスダウン
  • ドラッグ開始
  • 葉を元の場所にドラッグ
  • ドラッグで元の場所に戻る
  • ドラッグは有効なターゲットに入ります
  • 出口をドラッグして有効なターゲット
  • ドラッグで特定の無効なターゲットに入る
  • ドラッグは特定のターゲットを超えていません
  • 有効なターゲット上にホバーをドラッグ
  • 無効なターゲット上にホバーをドラッグ
  • ドロップ受け入れ
  • 拒否されたドロップ
  • 親コンテナにドロップ

これらのイベントのすべてがドラッグアンドドロップのデザインに適用できるわけではありませんが、うまくいけば、今あなたが待っている課題を目にするでしょう。アクセシビリティについて考えると、デザインに別のアプローチをするようになります。

この記事では、ARIA属性を使用してキーボードでドラッグアンドドロップを機能させる方法について説明します。 https://dev.opera.com/articles/accessible-drag-and-drop/ （デモがオンこのサイトでは、実際の動作も確認できます）。ただし、ドロップアンドドロップの数が多いため、デザインを再考する方が簡単な場合があります。

たとえば、デザインに応じて、メニューからトリガーをコピーして貼り付けたり、キーボードユーザーの移動オブジェクトに移動ボタンを配置したり、マウスユーザーは引き続きマウスのドラッグアンドドロップを使用できます。

5
SteveD

ドラッグアンドドロップ操作をアクセス可能にする方法は、その操作が何を達成しようとするかによって異なります。

たとえば、画面の1つのパネルから別のパネルに項目をドラッグする場合（ファイルマネージャ内のファイルをディレクトリから別のディレクトリに移動するなど）、私は DHTMLスタイルガイドワーキンググループ からのアプローチに従います。 Webアプリケーションのスクリプトは、そこにリストされているキー押下をリッスンし、それに応じてWAI-ARIA状態を適応させる必要があります。

ドラッグアンドドロップ操作の目的がリスト内のアイテムを並べ替えることである場合、次のアプローチが機能します。各アイテムに編集可能な番号を付け、キーボードユーザーが番号を編集して項目を並べ替えることができます。 LinkedInはこのアプローチを使用して、ユーザーが所属するグループの順序を並べ替えることができます。

ドラッグアンドドロップ操作の目的が2次元平面でアイテムを再配置することである場合、その意味を定義する必要があります（-====-）視覚的）配置とは、視覚に依存せずに同じ目標を達成する代替の相互作用です。

5
Tsundoku

一般的な考えに反して、ドラッグアンドドロップはアクセス可能である必要はありません。

何？！あなたが言う冒涜？

いや。ドラッグアンドドロップは目的を達成するための手段にすぎません。これにより、いくつかのタスクを実行できます。ただし、そのタスクは他のアクションを使用して実行することもできます。

たとえば、ボタンを見てみましょう。通常はマウスでそれらをクリックします。しかし、ボタンマウスクリックをアクセシブルにすることはしませんでした。マウスクリックをアクセシブルにするARIAタグはありません。そのアクションを実行する別の方法を提供しました-ボタンにタブで移動してスペースを押すか入力することができます。それは別のパラダイムです。

ドラッグアンドドロップも同様です。達成しようとしているタスクを確認する必要があります。ウィジェットをパレットからドラッグしてキャンバスにドロップしていますか？いいね。キーボードユーザー（およびスクリーンリーダーユーザー）がキーボードフォーカスをパレットに移動し、ウィジェットを選択して、それをキャンバス（左上隅や他のウィジェットのスタックの下など）に自動的に配置できるようにします。 、次に、新しく配置したオブジェクトにフォーカスを移動できるようにする（またはデフォルトでオブジェクトにフォーカスを移動できるようにする）ため、矢印キーを使用してオブジェクトを目的の場所に移動できます。

出来上がり。ドラッグアンドドロップアクションと同じタスクを実行しましたが、異なるアクションセットを使用しました。ドラッグアンドドロップ自体にアクセスできる必要はありません。

これは、DNDアクションをアクセシブルにすることができないという意味ではありません。 iPadでVoiceoverを実行しているSafariでタブを移動してみてください。超カッコイイ。押し続けてタブを選択すると、文字通り指を左右にドラッグでき、指を離す前にドロップする前または後に移動しているタブが聞こえます。

ARIA 1.1では、aria-dropeffectとaria-grabbedは非推奨であることに注意してください。

1
slugolicious