ドロップダウン vs. セレクト vs. コンボボックス
dropdownメニューはアクションを実行します。selectは決まったリストから選びます。comboboxはさらに、キーボードで入力や検索もできます。
アクションにはメニューを使用します。短い固定リストにはセレクトを使用します。長いまたは検索可能なリストにはコンボボックスを使用します。
各パターンが何をするかを見る
それぞれの例を試してみる。その後、それが作られた仕事について読む
ドロップダウン＆コンテキストメニュー — ラーニングバンドル
この学習バンドルは、開き方によってメニューを比較します。ドロップダウンはコントロールから開きます。コンテキストメニューは1つのオブジェクトに属し、しばしばポインタで開きます。このバンドルは、標準的なメニュー用語の1つではありません。
DropdownMenu / ContextMenu「その他」ボタンは一般的な操作を開きます。ファイルを右クリックすると、そのファイルに対する操作のみが開きます。
- 以下の場合に使用します
- タスクに合うトリガーとオブジェクトを持つメニューを選択します。次にそのキーボード動作を作成します。
- 以下の場合は使用しないでください
- コマンドメニューの中にフォームフィールドやサイトのメインナビゲーションを絶対に入れないでください。
- コードで使用する名前
DropdownMenu / ContextMenu
選択
セレクトは、リストを開いて、そこから1つ選ぶためのものです。
国の入力欄は、決まったリストだけを表示し、それ以外の値は受け付けません。
- 以下の場合に使用します
- リストが固定されていて、あまり長くなく、ページのスペースが少ない場合に使用します。
- 以下の場合は使用しないでください
- 人々が検索する必要がある長いリストには使用してはいけません。その代わりにコンボボックスを使用してください。
- コードで使用する名前
<select> / role="listbox"
編集可能なコンボボックス
編集可能なコンボボックスとは、入力するたびにリストをフィルタリングするテキストフィールドです。
「Tai」と入力して台北と台南を表示します。次に矢印キーで選択します。
- 以下の場合に使用します
- 長く検索可能なリスト、オートコンプリート、またはカスタム回答を許可する選択肢に使用します。
- 以下の場合は使用しないでください
- 普通のメニューやネイティブのセレクトを、動作が異なるからといってコンボボックスと呼んではいけません。
- コードで使用する名前
role="combobox" + aria-controls
クイック比較
| UIパターン | 最適 | のためではない | コードで使用する名前 |
|---|---|---|---|
| ドロップダウン＆コンテキストメニュー — ラーニングバンドルDropdown & Context Menu — Learning Bundle | タスクに合うトリガーとオブジェクトを持つメニューを選択します。次にそのキーボード動作を作成します。 | コマンドメニューの中にフォームフィールドやサイトのメインナビゲーションを絶対に入れないでください。 | DropdownMenu / ContextMenu |
| 選択Select | リストが固定されていて、あまり長くなく、ページのスペースが少ない場合に使用します。 | 人々が検索する必要がある長いリストには使用してはいけません。その代わりにコンボボックスを使用してください。 | <select> / role="listbox" |
| 編集可能なコンボボックスEditable Combobox | 長く検索可能なリスト、オートコンプリート、またはカスタム回答を許可する選択肢に使用します。 | 普通のメニューやネイティブのセレクトを、動作が異なるからといってコンボボックスと呼んではいけません。 | role="combobox" + aria-controls |
出荷前に
- 01
その人が何をする必要があるかを書き留めてください。
- 02
キーボード、フォーカス、タッチ、ズーム、読み込み、空、エラー状態をテストしてください。
- 03
人々がホバーや動作なしで同じ情報を得られるようにしてください。
- 04
小さい画面と大きい画面の両方で実コンテンツを使ってテストしてください。
比較リクエストをコピーできます
パターンを選ぶ際にチームが助けを必要とする場合、これをコピーしてください。
実際のユーザーフローに最適なパターンをドロップダウン＆コンテキストメニュー — ラーニングバンドル (Dropdown & Context Menu — Learning Bundle)、選択 (Select)、編集可能なコンボボックス (Editable Combobox)から選んでください。このルールを使用してください: dropdownメニューはアクションを実行します。selectは決まったリストから選びます。comboboxはさらに、キーボードで入力や検索もできます。 タスク、コンテンツ量、フローを停止するコストを書き出してください。キーボード、タッチ、読み込み、エラー、動作軽減の挙動を確認してください。選択理由を説明し、その後、プロジェクトのデザインシステムで最小限でアクセシブルなバージョンを作成してください。