ARIA: listbox ロール

{{ariaref}}

listbox ロールは、ユーザーが静的な1つ以上の項目を選択するリストに使用され、HTML の <select> 要素とは異なり、画像を含むことがあります。

説明

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

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

listbox ロールを持つ要素は、暗黙の aria-orientation の値に vertical を持ちます。

リストにタブで移動した場合、他に何も選択されていない場合はリスト内の最初の項目が選択されます。 上/下矢印はリストをナビゲートし、Shift + 上/下矢印を押すと選択範囲が移動して拡張されます。 1つ以上の文字を入力すると、リスト項目をナビゲートします(同じ文字はその文字から始まる各項目に移動し、異なる文字はその文字列全体で始まる最初の項目に移動します)。 現在の項目に関連するコンテキストメニューがある場合、Shift + F10 でそのメニューが起動します。 リスト項目がチェック可能である場合、スペースを使用してチェックボックスをトグルできます。 選択可能なリスト項目の場合、スペースは選択をトグルし、Shift + スペースを使用して連続項目を選択し、Ctrl + 矢印で選択せず​​に移動し、Ctrl + スペースを使用して不連続項目を選択できます。 全ての項目を選択するには、チェックボックス、リンクまたは他の方法を使用することをお勧めします。 Ctrl + A は、このためのショートカットキーとして使用できます。

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

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

関連するロール

option
1つ以上のネストされたオプションが必要です。 選択された全てのオプションは、aria-selectedtrue に設定されています。 選択されていない全てのオプションは、aria-selectedfalse に設定されています。 オプションを選択できない場合は、aria-selected を省略します。
list
listitem 要素を含むセクション。

ステートとプロパティ

aria-multiselectable
ユーザーが複数のオプションを選択できるようにするには、これを含めて true を設定します。 true に設定するならば、全てのオプションに aria-selected 属性を含めるべきです。 false または省略すると、現在選択されているオプションのみが選択され、いずれかのオプションが選択されている場合は、aria-selected 属性が必要で、true に設定する必要があります。
aria-activedescendant
そのオプションの aria-selected の値が truefalse を持っているかどうかに関わらず、最も最近にオプションと対話したことを意味する、現在アクティブなオプションの id を値として取ります。 複数選択であっても、1つの id の値をとります。
aria-required
選択が必要であることを示します。
aria-readonly
リストボックスは編集可能ではありません。 ユーザーはオプションの選択や非選択を変更することはできませんが、それ以外の操作は可能です。

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

  • 単一選択リストボックスがフォーカスを受け取ったとき、
    • リストボックスがフォーカスを受け取る前にオプションが選択されていない場合、最初のオプションがフォーカスを受け取ります。 必要に応じて、最初のオプションを自動的に選択してもよい。
    • リストボックスがフォーカスを受け取る前にオプションが選択されている場合、フォーカスは選択されたオプションに設定されます。
  • 複数選択リストボックスがフォーカスを受け取ったとき、
    • リストボックスがフォーカスを受け取る前にどのオプションも選択されていない場合、フォーカスは最初のオプションに設定され、選択状態には自動的な変更はありません。
    • リストボックスがフォーカスを受け取る前に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. オプションのぼかし、フォーカス、選択状態を視覚的に処理する。

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

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

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

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

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

以下のスニペットは、listbox ロールが 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>

より多くの例

ベストプラクティス

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

仕様

仕様 状態
Accessible Rich Internet Applications (WAI-ARIA) 1.1
ARIA listbox role の定義
勧告
WAI-ARIA Authoring Practices
Listbox Role の定義
草案

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

TBD

関連情報