ドロップゾーン
Drop Zone
別名: ドラッグ&ドロップアップロード、ファイルドロップエリア、ファイルアップロード、File drop zone、Upload dropzone、File upload
生態（さわってみる）
または
アップロードは行われません（デモ用）。選択・ドロップしたファイル名のみを表示します。
一言定義
ファイルをドラッグ＆ドロップ、またはクリックして選択させる、アップロード専用の受け皿UI。
分類
使う場面
- 画像・書類などのファイルをまとめてアップロードさせたいとき
- ドラッグ操作に不慣れなユーザーのために、クリックでのファイル選択も両立させたいとき
避ける場面
- アップロードではなく、既存データの並び替え・移動だけを行いたいとき（→ドラッグアンドドロップ）
- 添付が1ファイルのみかつ即座の選択で十分なとき（単純な<input type=file>ボタンで足りる）
近縁種との比較
汎用のドラッグアンドドロップが要素の並び替えや移動全般を指すのに対し、ドロップゾーンは ファイルをドロップしてアップロードする用途に特化した領域を指す。ドラッグ操作だけを唯一の 手段にすると、キーボードやスクリーンリーダーの利用者が操作できなくなるため、クリックでの ネイティブファイル選択ダイアログを必ず併設する必要がある。
近縁種
実例リンク
アクセシビリティ
- role
- <input type="file">をラップした領域。ドラッグ中の視覚フィードバックはCSSクラスの切り替えで表現し、実際のファイル選択操作はネイティブのファイル選択ダイアログに委譲する
- キーボード操作
- クリックまたはEnter/Spaceでネイティブのファイル選択ダイアログを開けるようにする（ドラッグ操作に依存しない代替経路が必須）
- 補足
- ドラッグ＆ドロップのみを唯一の操作手段にしない（キーボード・スクリーンリーダー利用者は操作できなくなる）。選択済みファイル一覧は、削除操作までキーボードで完結させる