ドラッグ&ドロップ

SmartHRに頻出する、ドラッグ&ドロップを使用するUIのパターンをまとめています。

ドラッグ&ドロップが必要なUIには、ユーザーを混乱させないように操作に一貫性をもたせることが重要です。ただ、それぞれのUIのパターンにおいて、アクセシビリティを確保することも重要です。

この章では、ドラッグ&ドロップを実装する際のベストプラクティスを紹介します。

ドラッグ&ドロップリスト

ドラッグ&ドロップリストは、ユーザーがアイテムをドラッグして順序を変更できるUIのパターンです。

インタラクティブな領域とは、ユーザーがアイテムをドラッグできる領域のことです。インタラクティブな領域は、ユーザーがアイテムをドラッグするためのドラッグ操作を開始できる要素を提供する必要があります。

一般的に、ユーザーがカード全体をドラッグできることを期待する場合、インタラクティブな領域はカード全体になります。

しかし、インタラクティブな要素を使用しているカードの中に、さらにインタラクティブな要素をネストすると、支援技術で内側のインタラクティブな要素にフォーカスできないなどの問題が起こります。この場合、カードの内部にインタラクティブな要素が存在するためのハンドル形式パターンもあります。

HTMLのインタラクティブ要素をカードの中にインタラクティブな要素を配置したい場合は、カードコンポーネントとは別のドラッグ操作のためのハンドルを提供します。一般的には、インタラクティブな領域を示す「」や「」アイコンを使用して、ユーザーがどこをドラッグすればいいのかを明確にします。

カード全体ではなく、ハンドラーのみがインタラクティブな領域になっている

Don't

インタラクティブ要素のカードの中にボタン要素が存在するのに、カード全体がインタラクティブな領域になっている

どうしても、デザインがカード全体がインタラクティブな領域になることを要求する場合は、カード全体をインタラクティブな要素からdiv要素に変更し、正確なARIA属性とHTMLのdrag-and-drop API別タブで開くを使用できます。

注意: この方法はアクセシビリティの支援技術の不具合と繋がる可能性が高いため推奨しません。

アクセシブルなインタラクティブHTML要素の使い方については、下記のWCAGのルールを参照してください。

すべてのユーザーがマウスやタッチ入力を使用できるわけではないため、ドラッグ&ドロップの操作をキーボードでも可能にすることが重要です。

これを実現する一般的な方法は、アイテムを上下に移動するためのボタンを提供することや、カード用のドロップダウンメニューをオプションとして提供することです。

ドラッグ&ドロップの操作をキーボードでも可能にする

Don't

ドラッグ&ドロップの操作がマウスやタッチ操作でしかできない

アクセシブルなドラッグ&ドロップの実装について迷う方、キーボード操作周りのルールを詳しく知りたい方には、下記のWCAGのルールを参照してください。

ユーザーがアイテムをドラッグしている最中にアクションをキャンセルできるようにする必要があります。一般的には、Escapeキーを使用してキャンセルする方法が実装されます。

アクションをキャンセルできない場合は、最新のアクションを元に戻す方法を提供する必要があります。これは、元に戻すボタンやメニューのオプションを通じて行なうことができます。

②と③の位置を変えるアクションのあとで、アクションをキャンセルをできるようにする

Don't

②と③の位置を変えるアクションのあとで、アクションをキャンセルする方法がない

アクションのキャンセル操作のアクセシブル条件について迷う方には、下記のWCAGのルールとテクニックを参照してください。