ARIA: listbox ロール

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

説明

リストボックス (listbox) ロールは、HTML の選択 (<select>) 要素と同様に、ユーザーが1つまたは複数の静的な項目を選択できるリストを作成する要素を識別するために使用します。 <select> とは異なり、リストボックスは画像を含むことができます。 リストボックスのそれぞれの子は、オプション (option) ロールを持つべきです。

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

リストボックス (listbox) ロールを持つ要素は、暗黙的な aria-orientation の値として垂直 (vertical) を持ちます。

リストに Tab で移動すると、他に何も選択されていない場合はリストの最初の項目が選択されます。 上/下矢印でリストをナビゲートし、Shift + 上/下矢印を押すと選択範囲が移動して拡張されます。 1文字以上をタイプ入力すると、リスト項目をナビゲートします (同じ文字はその文字から始まる各項目に移動し、異なる文字はその文字列全体で始まる最初の項目に移動します) 。 現在の項目に関連付けられたコンテキストメニューがある場合、Shift + F10 でそのメニューが起動します。 リスト項目がチェック可能である場合、スペースを使用してチェックボックス (checkbox) をトグルできます。 選択可能なリスト項目の場合、スペースを使用して選択をトグルし、Shift + スペースを使用して連続する項目を選択し、Ctrl + 矢印を使用して選択せずに移動し、Ctrl + スペースを使用して連続しない項目を選択できます。 全ての項目を選択するには、チェックボックス、リンクまたは他の方法を使用することをお勧めします。 Ctrl + A は、このためのショートカットキーとして使用できます。 (訳注: 推奨モデルと説明の無い代替モデルの操作方法が混じっているし、それ以外にもキーボードインタラクションに無い説明や異なった説明もあります。)

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

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

関連するロール

option
1つ以上のネストされたオプションが必要です。 選択された全てのオプションでは、aria-selectedtrue に設定されています。 選択されていない全てのオプションでは、aria-selected が (訳注: 省略されるか) false に設定されています。 オプションが選択可能でない場合は、aria-selected を省略します (訳注: オプションでは、aria-selected のデフォルトは、false であり、変更できないことを示すなら、aria-disabled や aria-readonly があります) 。
list
リスト項目 (listitem) 要素を含むセクション。

ステートとプロパティ

aria-activedescendant
リストボックス内で現在アクティブな要素の id 文字列を保持します。 それがオプション要素である場合、そのオプションの aria-selected の値が true であるかどうかに関係なく、それは最後にインタラクトされたオプションの id になります。 複数選択可能なリストボックス内であっても、1つの id の値のみを取ります。 id がリストボックスの DOM 子孫を参照していない場合、その idaria-owns 属性の IDs の中に含まれている必要があります。
aria-owns
これは、リストボックスの DOM 子要素ではない要素 IDs のスペース区切りのリストです。 ここにリストされている IDs は、他の要素の aria-owns 属性にもリストできません。
aria-multiselectable
ユーザーが複数のオプションを選択できる場合は、これを含めて true に設定します。 true に設定されている場合、選択可能な全てのオプションには、aria-selected 属性が含まれ、true または false に設定されているべきです。 選択可能でないオプションは、aria-selected 属性を持つべきではありません
false または省略されている場合、いずれかのオプションが選択されているならば、現在選択されているオプションのみが aria-selected 属性を必要とし、true に設定されている必要があります (訳注: 仕様では、単一選択コンテナーに関する説明が複数選択コンテナーに比べて具体的ではなく曖昧なので、aria-selected を使わない「選択がフォーカスに従う」単一選択コンテナーと aria-selected を使う「選択がフォーカスに従わない」単一選択コンテナーが混ざっているようです) 。
aria-required
空でない文字列値を持つオプションを選択する必要があることを示す論理属性。
aria-readonly
ユーザーは、オプションが選択されているかいないかを変更することはできませんが、リストボックスはそれ以外の操作が可能です。
aria-label
リストボックスを識別する、人間が読むことができる文字列値。 可視のラベルがある場合は、代わりに aria-labelledby を使用してそのラベルを参照するべきです。
aria-labelledby
リストボックスを識別する、要素 IDs のスペースで区切られたリストで、1つ以上の可視の要素を識別します。 可視のラベルがない場合は、代わりに aria-label を使用してラベルを含めるべきです。 (注: 2つの L が付いた「labelled」は、アクセシビリティ API の規約に基づく正しいスペルです。)
aria-roledescription
リストボックスのロールをより明確に識別する、人間が読むことができる文字列値。 スクリーンリーダーは、ラベル (ある場合) を読んだ後に、「リストボックス」と言う代わりに、この値をユーザーに読み上げることがよくあります。

(詳細および ARIA のステートとプロパティの完全なリストについては、ARIA の listbox (role) の文書を参照してください。)

キーボードインタラクション

  • 単一選択リストボックスがフォーカスを受け取ったとき、
    • リストボックスがフォーカスを受け取る前にどのオプションも選択されていなかった場合、最初のオプションがフォーカスを受け取ります。 任意で、最初のオプションを自動選択することもできます。
    • リストボックスがフォーカスを受け取る前にオプションが選択されていた場合、フォーカスは選択されているオプションに設定されます。
  • 複数選択リストボックスがフォーカスを受け取ったとき、
    • リストボックスがフォーカスを受け取る前にどのオプションも選択されていなかった場合、フォーカスは最初のオプションに設定され、選択状態の自動変更は行われません。
    • リストボックスがフォーカスを受け取る前に1つ以上のオプションが選択されていた場合、フォーカスはリストの中で最初に選択されているオプションに設定されます。
  • ↓ (下矢印): 次のオプションにフォーカスを移動します。 任意で、単一選択リストボックスでは、選択もフォーカスと共に移動することがあります。
  • ↑ (上矢印): 前のオプションにフォーカスを移動します。 任意で、単一選択リストボックスでは、選択もフォーカスと共に移動することがあります。
  • Home (任意): 最初のオプションにフォーカスを移動します。 任意で、単一選択リストボックスでは、選択もフォーカスと共に移動することがあります。 5つ以上のオプションがあるリストでは、このキーをサポートすることを強くお勧めします。
  • End (任意): 最後のオプションにフォーカスを移動します。 任意で、単一選択リストボックスでは、選択もフォーカスと共に移動することがあります。 5つ以上のオプションがあるリストでは、このキーをサポートすることを強くお勧めします。
  • 先行入力は、全てのリストボックス、特に7つ以上のオプションがあるリストボックスに対してお勧めします。
    •  文字を入力: フォーカスは、入力された文字で始まる名前を持つ次の項目に移動します。
    • 複数の文字をすばやく続けて入力: フォーカスは、入力された文字列で始まる名前を持つ次の項目に移動します。
  • 複数選択: 作成者は、複数選択をサポートするために2つのインタラクションモデルのいずれかを実装することができます。 ユーザーがリストをナビゲートしながら ShiftCtrl などの修飾キーを押し続けなくてもよい推奨モデルや、選択状態が失われるのを避けるためにナビゲート中に修飾キーを押し続ける必要のある代替モデルがあります。
    • 推奨選択モデル — 修飾キーを押し続ける必要はありません。
      • スペース: フォーカスされたオプションの選択状態を変更します。
      • Shift + ↓ (下矢印) (任意): 次のオプションにフォーカスを移動し、選択状態をトグルします。
      • Shift + ↑ (上矢印) (任意): 前のオプションにフォーカスを移動し、選択状態をトグルします。
      • Shift + スペース (任意): 直前に選択した項目からフォーカスされた項目までの連続した項目を選択します。
      • Ctrl + Shift + Home (任意): フォーカスされたオプションから最初のオプションまでの全てのオプションを選択します。 任意で、フォーカスを最初のオプションに移動します。
      • Ctrl + Shift + End (任意): フォーカスされたオプションから最後のオプションまでの全てのオプションを選択します。 任意で、フォーカスを最後のオプションに移動します。
      • Ctrl + A (任意): リスト内の全てのオプションを選択します。 任意で、全てのオプションが選択されている場合は、全てのオプションの選択を解除することもできます。

必要な JavaScript 機能

単一選択リストボックスでオプションを選択する

ユーザーがオプションを選択すると、以下が起こる必要があります。

  1. 前に選択したオプションの選択を解除し、aria-selectedfalse に設定するか、属性を完全に削除して、新しく選択を解除したオプションの外観を選択されていないように変更します。
  2. 新しく選択したオプションを選択し、オプションに aria-selected="true" を設定し、新しく選択したオプションの外観を選択されているように変更します。
  3. リストボックスの aria-activedescendant の値を、新しく選択したオプションの id に更新します。
  4. オプションのブラー (blur) 、フォーカス、選択状態を視覚的に処理します。

複数選択リストボックスでオプションの状態をトグルする

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

  1. 現在フォーカスされているオプションの aria-selected ステート (状態) をトグルし、aria-selected の状態を false なら true に、true なら false に変更します。
  2. 選択状態を反映するようにオプションの外観を変更します。
  3. オプションを選択の解除へトグルしている場合でも、リストボックスの aria-activedescendant の値を、ユーザーが直前にインタラクトしたオプションの id に更新します。

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

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

以下のスニペットは、リストボックスロールが HTML ソースコードに直接どのように追加されるかを示しています。

<p id="listbox1label" role="label">色を選択:</p>
<div role="listbox" tabindex="0" id="listbox1" aria-labelledby="listbox1label"
  onclick="return listItemClick(event);"
  onkeydown="return listItemKeyEvent(event);"
  onkeypress="return listItemKeyEvent(event);"
  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>

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

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

より多くの例

ベストプラクティス

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

仕様

仕様 状態
Accessible Rich Internet Applications (WAI-ARIA) 1.1
ARIA listbox role の定義
勧告
Unknown
Listbox Role の定義
不明

スクリーンリーダーのサポート

TBD

関連情報