ARIA: combobox ロール

解説

combobox は、名前付き入力フィールドと、その入力フィールドに使用可能な値を提供するポップアップを組み合わせた複合ウィジェットです。このウィジェットの目的は、ユーザーが完全な値を入力しなくても値を選択できるようにし、対応している値が制限されている場合は、無効または非対応の値をユーザーが入力することを防ぐことで、ユーザー体験を向上させることです。

combobox ロールは、編集可能なコンボボックスの場合は input 要素に、選択のみのコンボボックスの場合は button 要素に設定できます。この要素は、ユーザーが値を設定するのに役立つ動的にポップアップ表示されるリストボックスやグリッドなどの他の要素を制御します。

combobox ロールを持つ要素は、編集可能な単一行テキストフィールド（<datalist> を持つものと同様の <input> 要素を使用）または選択のみの要素（直接テキスト入力を許可せず、現在の値のみを表示する button 要素を使用）のどちらかです。

WAI-ARIA のコンボボックスに必要な属性は aria-expanded だけです。ただし、実装に応じて、通常は他のいくつかの属性が必要です：aria-haspopup、aria-controls、aria-activedescendant、aria-autocomplete。

通常、コンボボックスの初期状態は折りたたまれており、aria-expanded="false" が設定されています。折りたたまれた状態では、コンボボックス要素と、オプションでポップアップを呼び出すための兄弟要素であるボタンのみが表示されます。折りたたまれているときは、aria-expanded を false の値に設定することが必須です。これは、ウィジェットが拡張可能であることを支援技術に示すためです。

コンボボックスは、現在の値を示すコンボボックス要素と、それに紐づくポップアップ要素の両方が表示されている場合に、展開状態になります。展開時には、aria-expanded="true" を設定する必要があります。

combobox に紐づくポップアップ要素は、listbox、tree、grid、または dialog 要素のいずれかです。

コンボボックスには listbox の暗黙的な aria-haspopup 値があるため、ポップアップが listbox の場合、この属性を含めることは任意です。コンボボックスのポップアップ要素が tree、grid、dialog（listbox 以外）のいずれかの場合、aria-haspopup 属性が必要です。aria-haspopup の値は、tree、grid、dialog、または listbox ロールのいずれかでなければなりません。このプロパティについて、true は menu を意味するので、値がブール値ではなく、ポップアップのロールに対応することを確認してください。

コンボボックスのポップアップが表示される際は、コンボボックス要素の aria-controls 属性が、ポップアップの listbox、tree、grid、dialog 要素の id に設定されていることを確認してください。これは、combobox ロールを持つ要素と、それが制御するポップアップとの関係を示す方法です。（注：古い ARIA 仕様では、これは aria-controls ではなく aria-owns でした。そのため、古いコンボボックスの実装では aria-owns が見られる場合があります。コード内の aria-owns は aria-controls に更新する必要があります！）

コンボボックスの UI に、ポインターやタッチイベントを介してポップアップの表示を制御できるアイコンなどの可視コントロールが含まれている場合、そのコントロールは <button>、type が button の <input>、または tabindex が -1 の button ロール要素であるべきです。これにより、ボタンはフォーカス可能になりますが、キーボードタブシーケンスには含まれません。これは、role が combobox の要素の子孫であってはなりません。

キーボードアクセシブルにするには、combobox 要素と、ポップアップの listbox、tree、grid、dialog に含まれる要素との間でフォーカスを移動するためのキーボードサポートをプログラムする必要があります。一般的な慣例の一つは、Down Arrow が input からポップアップ要素の最初のフォーカス可能な子孫にフォーカスを移動することです。

aria-activedescendant プロパティは、DOM フォーカスがコンボボックスに残る実装において、コンボボックスポップアップの現在アクティブな要素（例：ポップアップ listbox 内の option）を識別するために使用できます。ポップアップが呼び出された時に DOM フォーカスがコンボボックスに残らず、代わりに DOM フォーカスがダイアログなどのポップアップ内に移動する場合、aria-activedescendant は必要ない場合があります。

コンボボックスが編集可能な <input> 要素として実装されている場合、コンボボックスの値は input の値です。button 要素で実装された選択のみのコンボボックスの場合、値はポップアップ内の選択されたオプションから取得されます。

aria-autocomplete 属性は、テキスト入力をサポートする編集可能なコンボボックスにのみ適用されます。これらのコンボボックスについては、提供される動作に対応する値（inline、list、both）に属性を設定します。この属性は、テキストを入力すると、ユーザーの意図する値の 1 つ以上の予測が表示され、これらの予測がどのように提示されるかを指定することを示します。button 要素を使用する選択のみのコンボボックスでは、テキスト入力が不可能であるため、aria-autocomplete は使用すべきではありません。

すべての combobox にはアクセシブル名が必要で、これは 3 つの方法のいずれかで提供できます：

1. <input> 要素の場合、関連付けられた <label> を使用する。
2. UI に可視ラベルが存在する場合、ラベル要素の id を参照する aria-labelledby を使用する。
3. 可視ラベルが存在しない場合、aria-label を使用する。

関連する WAI-ARIA のロール、ステート、プロパティ

aria-expanded

必須。コンボボックスが開いている (true) か閉じている (false) かを識別します。

aria-haspopup

暗黙的。省略された場合、デフォルトは listbox です。tree、grid、または dialog もサポートします。コンボボックスにポップアップがあることを識別し、そのタイプを示します。

キーボード操作

Down Arrow

閉じている場合はポップアップを開き、次のオプションにフォーカスを移動します。何も選択されていない場合は最初のオプションに移動します。

Alt + Down Arrow （任意）

ポップアップが利用可能だが表示されていない場合、フォーカスを移動せずにポップアップを表示します。

Up Arrow

閉じている場合はポップアップを開き、前のオプションにフォーカスを移動します。何も選択されていない場合は最後のオプションに移動します。

Alt + Up Arrow （任意）

ポップアップにフォーカスがある場合、コンボボックスにフォーカスを戻します。そうでなければポップアップを閉じます。

Escape

開いている場合はポップアップを閉じます。ポップアップが既に閉じている場合、編集可能なコンボボックスの値をクリアします。

編集可能なコンボボックスのキーボード操作

Enter

ポップアップで自動補完候補が選択されている場合、コンボボックスの値を更新し、入力カーソルを末尾に移動することで候補を受け入れます。 デフォルトアクション（例：メッセージングアプリケーションで、受け入れた値を受信者リストに追加する）をトリガーする場合もあります。

Tab

現在の値を受け入れ、次のフォーカス可能要素にフォーカスを移動します。

選択のみのコンボボックスのキーボード操作

Enter または Space

ポップアップが閉じている場合、ポップアップを開きます。ポップアップが開いていてオプションが選択されている場合、選択されたオプションをコンボボックスの値として受け入れ、ポップアップを閉じます。

Tab

現在の選択を受け入れ、次のフォーカス可能要素にフォーカスを移動します。

Home または End

ポップアップが開いている場合、それぞれ最初または最後のオプションにフォーカスを移動します。

例

<label for="jokes">好きなジョークの種類を選んでください</label>
<div class="combo-wrap">
  <input
    type="text"
    id="jokes"
    role="combobox"
    aria-controls="joketypes"
    aria-autocomplete="list"
    aria-expanded="false"
    data-active-option="item1"
    aria-activedescendant="" />
  <span aria-hidden="true" data-trigger="multiselect"></span>
  <ul id="joketypes" role="listbox" aria-label="Jokes">
    <li class="active" role="option" id="item1">Puns</li>
    <li class="option" role="option" id="item2">Riddles</li>
    <li class="option" role="option" id="item3">Observations</li>
    <li class="option" role="option" id="item4">Knock-knock</li>
    <li class="option" role="option" id="item5">One liners</li>
  </ul>
</div>

仕様書

関連情報

• HTML <label> 要素
• HTML <select> 要素
• HTML <option> 要素
• HTML <input> 要素
• ARIA: listbox ロール
• ARIA: option ロール
• ARIA: list ロール
• ARIA: listitem ロール
• ARIA Best Practices – Combobox
• Accessibleコンボボックスmodule examples by Deque