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 は、このためのショートカットキーとして使用できます。 (訳注: 推奨モデルと説明の無い代替モデルの操作方法が混じっているし、それ以外にもキーボードインタラクションに無い説明や異なった説明もあります。)

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

必要な JavaScript 機能

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

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

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

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

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

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

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

例

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

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

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> 要素でより簡単に処理できます。

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> と同様な、アクティブにすると展開される単一選択の折りたたみ可能なリストボックス。 (英語)
並べ替え可能なオプションを持つリストボックスの例: オプションの追加、移動、および削除が可能なツールバーが付属する、単一選択リストボックスと複数選択リストボックスの両方の例。 (英語)

ベストプラクティス

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

仕様書

Specification
Accessible Rich Internet Applications (WAI-ARIA) # listbox
Unknown specification

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

TBD

ARIA: listbox ロール

説明

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

関連するロール

ステートとプロパティ

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