ARIA: listbox ロール

listbox ロールは、1 つまたは複数の静的なアイテムをユーザーが選択できるリストに使用します。HTML の <select> 要素とは異なり、画像を含むことができます。

解説

listbox ロールは、HTML の <select> 要素と同様に、ユーザーが 1 つまたは複数の静的なアイテムを選択できるリストを生成する要素を識別するために使用されます。<select> とは異なり、リストボックスには画像を含めることができます。リストボックスには、ロールが option である子要素、またはロールが group であり、ロールが option の子要素を含む子要素を含むことができます。

HTML の選択要素や、1 アイテムしか選択できない場合はラジオボタンのグループ、複数アイテムを選択できる場合はチェックボックスのグループを使用することを強くお勧めします。なぜなら、全ての子孫に対するフォーカスを管理するためには、キーボードでの操作がたくさん必要であり、ネイティブの HTML 要素はこの機能をただで提供してくれるからです。

listbox ロールを持つ要素は、暗黙的な aria-orientation の値として vertical（垂直）を持ちます。

Tab キーでリストに移動すると、他に選択されているアイテムがなければ、リストの最初のアイテムが選択されます。↑/↓ でリスト内を移動でき、Shift + ↑/↓ を押すと、移動しながら選択範囲を拡大できます。1 文字以上の文字を入力すると、リストアイテム間を移動できます（その文字と同じ文字で始まるそれぞれのアイテム内を巡回し、複数の文字を入力するとそれ全体で始まる最初のアイテムへ移動します）。現在のアイテムに関連付けられたコンテキストメニューがある場合、Shift + F10 を押すとそのメニューが表示されます。リストアイテムにチェックボックスがある場合、スペースキーを使用してチェックボックスのオン/オフを切り替えることができます。選択可能なリストアイテムについては、スペースキーで選択状態を切り替え、Shift + スペースキーで連続したアイテムを選択し、Ctrl + 矢印キーで選択せずに移動し、Ctrl + スペースキーで連続していないアイテムを選択できます。すべてのアイテムを選択するには、チェックボックスやリンクなどの方法を使用することをお勧めします。また、この操作のショートカットキーとして Ctrl + A を使用することもできます。

リストボックスロールが要素に追加されるか、そのような要素が可視になると、スクリーンリーダーは、リストボックスがフォーカスを得たときにリストボックスのラベルとロールをアナウンスします。選択肢やアイテムがリスト内でフォーカスされると、次にそれがアナウンスされ、スクリーンリーダーがサポートしていれば、続いてリストでのアイテムの位置が示されます。リスト内でフォーカスが移動すると、スクリーンリーダーは関連するアイテムをアナウンスします。

必要な JavaScript 機能

単一選択リストボックスで選択肢を選択する

ユーザーが選択肢を選択すると、以下が起こる必要があります。

前に選択した選択肢の選択を解除し、aria-selected を false に設定するか、属性を完全に削除して、新しく選択を解除した選択肢の外観を選択されていないように変更します。
新しく選択した選択肢を選択し、選択肢に aria-selected="true" を設定し、新しく選択した選択肢の外観を選択されているように変更します。
リストボックスの aria-activedescendant の値を、新しく選択した選択肢の id に更新します。
選択肢のぼかし、フォーカス、選択状態を視覚的に処理します。

複数選択リストボックスで選択肢の状態をトグルする

ユーザーが選択肢をクリックしたり、選択肢にフォーカスしているときにスペースを押すなどして、選択肢の状態をトグルすると、以下が起こる必要があります。

現在フォーカスされている選択肢の aria-selected ステート (状態) をトグル切り替えし、aria-selected の状態を false なら true に、true なら false に変更します。
選択状態を反映するように選択肢の外観を変更します。
選択肢を選択の解除へトグルしている場合でも、リストボックスの aria-activedescendant の値を、ユーザーが直前に操作した選択肢の id に更新します。

メモ: ARIA の使用の第一のルールは、要素を転用して ARIA のロール、ステート、プロパティを追加することでアクセス可能にするのではなく、必要としている意味論と振る舞いがすでに組み込まれているネイティブな機能を使用できることです。 <option> 要素を子孫に持つ <select> 要素は、必要な全ての操作をネイティブに処理します。

例

例 1: aria-activedescendant を使用する単一選択リストボックス

次のスニペットでは、aria-activedescendant を使用して、リストボックスロールが HTML ソースコードに直接追加される方法を示しています。

html

<p id="listbox1label" role="label">色を選択:</p>
<div
  role="listbox"
  tabindex="0"
  id="listbox1"
  aria-labelledby="listbox1label"
  aria-activedescendant="listbox1-1">
  <div role="option" id="listbox1-1" class="selected" aria-selected="true">
    緑
  </div>
  <div role="option" id="listbox1-2">オレンジ</div>
  <div role="option" id="listbox1-3">赤</div>
  <div role="option" id="listbox1-4">青</div>
  <div role="option" id="listbox1-5">紫</div>
  <div role="option" id="listbox1-6">ペリウィンクル</div>
</div>

const listbox = document.getElementById("listbox1");
listbox.addEventListener("click", listItemClick);
listbox.addEventListener("keydown", listItemKeyEvent);
listbox.addEventListener("keypress", listItemKeyEvent);

これは、ネイティブの HTML の <select> 要素と <label> 要素でより簡単に処理できます。

html

<label for="listbox1">色を選択:</label>
<select id="listbox1">
  <option selected>緑</option>
  <option>オレンジ</option>
  <option>赤</option>
  <option>青</option>
  <option>紫</option>
  <option>ペリウィンクル</option>
</select>

それ以外の例

スクロール可能なリストボックスの例^(英語): 1 より大きい size 属性を持つ HTML の <select> と同様な、スクロールしてより多くの選択肢を表示する単一選択リストボックス。
折りたたみ可能なドロップダウンリストボックスの例^(英語): 属性 size="1" を持つ HTML の <select> と同様な、アクティブにすると展開される単一選択の折りたたみ可能なリストボックス。
並べ替え可能な選択肢を持つリストボックスの例^(英語): 選択肢の追加、移動、および削除が可能なツールバーが付属する、単一選択リストボックスと複数選択リストボックスの両方の例。

ベストプラクティス

キーボードからアクセス可能にするために、作成者はこのロールの全ての子孫のフォーカスを管理^(英語)すべきです。
リストがフォーカスされていない場合、作成者は選択に異なるスタイリングを使用することをお勧めします。例えば、アクティブでない選択は、より明るい背景色で表示されることが多いです。
リストボックスが別のウィジェットの一部でない場合は、aria-labelledby プロパティを設定すべきです。
1 つ以上の項目が DOM 上でリストボックスの子でない場合、追加の aria-* プロパティを設定する必要があります（ARIA のベストプラクティス^(英語)を参照）。
リストボックスを展開する正当な理由がある場合は、combobox ロールの方がより適切かもしれません。

仕様書

仕様書
Accessible Rich Internet Applications (WAI-ARIA) # listbox
Unknown specification

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2026年7月22日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告

ARIA: listbox ロール

解説

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

関連するロール

ステートとプロパティ

キーボード操作