\{{ariaref}}
- -listbox ロールは、ユーザーが静的な1つ以上の項目を選択するリストに使用され、HTML の <select> 要素とは異なり、画像を含むことがあります。
リストボックス (listbox) ロールは、HTML の <select> 要素とは異なり、画像を含むことができる、1つまたは複数の静的な項目をユーザーが選択できるリストに使用します。
listbox ロールは、HTML の {{htmlelement("select")}} 要素と同様に、ユーザーが1つまたは複数の静的項目を選択できるリストを作成する要素を識別するために使用されます。 <select> とは異なり、リストボックス（listbox）は画像を含むことができます。 リストボックスのそれぞれの子は、option ロールを持つべきです。
リストボックス (listbox) ロールは、HTML の選択 ({{htmlelement("select")}}) 要素と同様に、ユーザーが1つまたは複数の静的な項目を選択できるリストを作成する要素を識別するために使用します。 <select> とは異なり、リストボックスは画像を含むことができます。 リストボックスのそれぞれの子は、オプション (option) ロールを持つべきです。
HTML の <select> 要素または、1項目のみを選択する場合はラジオボタンのグループ、複数項目を選択する場合はチェックボックスのグループを使用することを強くお勧めします。 なぜなら、全ての子孫のフォーカスを管理するためのキーボードのインタラクティビティがたくさんあり、ネイティブな HTML 要素がこの機能を無料で提供するためです。
HTML の選択要素や、1項目しか選択できない場合はラジオボタンのグループ、複数項目を選択できる場合はチェックボックスのグループを使用することを強くお勧めします。 なぜなら、全ての子孫に対するフォーカスを管理するためには、キーボードでのインタラクティビティがたくさん必要であり、ネイティブの HTML 要素はこの機能を無料で提供してくれるからです。
-listbox ロールを持つ要素は、暗黙の aria-orientation の値に vertical を持ちます。
リストボックス (listbox) ロールを持つ要素は、暗黙的な aria-orientation の値として垂直 (vertical) を持ちます。
リストにタブで移動した場合、他に何も選択されていない場合はリスト内の最初の項目が選択されます。 上/下矢印はリストをナビゲートし、Shift + 上/下矢印を押すと選択範囲が移動して拡張されます。 1つ以上の文字を入力すると、リスト項目をナビゲートします（同じ文字はその文字から始まる各項目に移動し、異なる文字はその文字列全体で始まる最初の項目に移動します）。 現在の項目に関連するコンテキストメニューがある場合、Shift + F10 でそのメニューが起動します。 リスト項目がチェック可能である場合、スペースを使用してチェックボックスをトグルできます。 選択可能なリスト項目の場合、スペースは選択をトグルし、Shift + スペースを使用して連続項目を選択し、Ctrl + 矢印で選択せずに移動し、Ctrl + スペースを使用して不連続項目を選択できます。 全ての項目を選択するには、チェックボックス、リンクまたは他の方法を使用することをお勧めします。 Ctrl + A は、このためのショートカットキーとして使用できます。
+リストに Tab で移動すると、他に何も選択されていない場合はリストの最初の項目が選択されます。 上/下矢印でリストをナビゲートし、Shift + 上/下矢印を押すと選択範囲が移動して拡張されます。 1文字以上をタイプ入力すると、リスト項目をナビゲートします (同じ文字はその文字から始まる各項目に移動し、異なる文字はその文字列全体で始まる最初の項目に移動します) 。 現在の項目に関連付けられたコンテキストメニューがある場合、Shift + F10 でそのメニューが起動します。 リスト項目がチェック可能である場合、スペースを使用してチェックボックス (checkbox) をトグルできます。 選択可能なリスト項目の場合、スペースを使用して選択をトグルし、Shift + スペースを使用して連続する項目を選択し、Ctrl + 矢印を使用して選択せずに移動し、Ctrl + スペースを使用して連続しない項目を選択できます。 全ての項目を選択するには、チェックボックス、リンクまたは他の方法を使用することをお勧めします。 Ctrl + A は、このためのショートカットキーとして使用できます。 (訳注: 推奨モデルと説明の無い代替モデルの操作方法が混じっているし、それ以外にもキーボードインタラクションに無い説明や異なった説明もあります。)
-listbox ロールが要素に追加されるか、そのような要素が可視になると、スクリーンリーダーは、フォーカスを得たときにリストボックスのラベルとロールをアナウンスします。 オプションや項目がリスト内でフォーカスされている場合は、次にそれがアナウンスされ、その後、スクリーンリーダーがサポートしている場合は、リストでの項目の位置が示されます。 リスト内でフォーカスが移動すると、スクリーンリーダーは関連する項目をアナウンスします。
リストボックスロールが要素に追加されるか、そのような要素が可視になると、スクリーンリーダーは、リストボックスがフォーカスを得たときにリストボックスのラベルとロールをアナウンスします。 オプションや項目がリスト内でフォーカスされると、次にそれがアナウンスされ、スクリーンリーダーがサポートしていれば、続いてリストでの項目の位置が示されます。 リスト内でフォーカスが移動すると、スクリーンリーダーは関連する項目をアナウンスします。
aria-selected が true に設定されています。 選択されていない全てのオプションは、aria-selected が false に設定されています。 オプションを選択できない場合は、aria-selected を省略します。aria-selected が true に設定されています。 選択されていない全てのオプションでは、aria-selected が (訳注: 省略されるか) false に設定されています。 オプションが選択可能でない場合は、aria-selected を省略します (訳注: オプションでは、aria-selected のデフォルトは、false であり、変更できないことを示すなら、aria-disabled や aria-readonly があります) 。listitem 要素を含むセクション。listitem) 要素を含むセクション。true を設定します。 true に設定するならば、全てのオプションに aria-selected 属性を含めるべきです。 false または省略すると、現在選択されているオプションのみが選択され、いずれかのオプションが選択されている場合は、aria-selected 属性が必要で、true に設定する必要があります。aria-selected の値が true や false を持っているかどうかに関わらず、最も最近にオプションと対話したことを意味する、現在アクティブなオプションの id を値として取ります。 複数選択であっても、1つの id の値をとります。id 文字列を保持します。 それがオプション要素である場合、そのオプションの aria-selected の値が true であるかどうかに関係なく、それは最後にインタラクトされたオプションの id になります。 複数選択可能なリストボックス内であっても、1つの id の値のみを取ります。 id がリストボックスの DOM 子孫を参照していない場合、その id は aria-owns 属性の IDs の中に含まれている必要があります。aria-owns 属性にもリストできません。true に設定します。 true に設定されている場合、選択可能な全てのオプションには、aria-selected 属性が含まれ、true または false に設定されているべきです。 選択可能でないオプションは、aria-selected 属性を持つべきではありません。false または省略されている場合、いずれかのオプションが選択されているならば、現在選択されているオプションのみが aria-selected 属性を必要とし、true に設定されている必要があります (訳注: 仕様では、単一選択コンテナーに関する説明が複数選択コンテナーに比べて具体的ではなく曖昧なので、aria-selected を使わない「選択がフォーカスに従う」単一選択コンテナーと aria-selected を使う「選択がフォーカスに従わない」単一選択コンテナーが混ざっているようです) 。aria-labelledby を使用してそのラベルを参照するべきです。aria-label を使用してラベルを含めるべきです。 (注: 2つの L が付いた「labelled」は、アクセシビリティ API の規約に基づく正しいスペルです。)(詳細および ARIA のステートとプロパティの完全なリストについては、ARIA の listbox (role) の文書を参照してください。)
ユーザーがオプションを選択すると、以下が起こる必要があります。
aria-selected を false に設定するか、属性を完全に削除して、新しく選択されなくなったオプションの外観を選択されていないように変更する。aria-selected="true" と設定し、新しく選択されたオプションの外観を選択されているように変更する。aria-activedescendant の値を、新しく選択したオプションの id に更新する。aria-selected を false に設定するか、属性を完全に削除して、新しく選択を解除したオプションの外観を選択されていないように変更します。aria-selected="true" を設定し、新しく選択したオプションの外観を選択されているように変更します。aria-activedescendant の値を、新しく選択したオプションの id に更新します。ユーザーがオプションをクリックするか、オプションにフォーカスを当てたときにスペースを押すか、その他でオプションの状態をトグルすると、以下が起こる必要があります。
+ユーザーがオプションをクリックしたり、オプションにフォーカスしているときにスペースを押すなどして、オプションの状態をトグルすると、以下が起こる必要があります。
aria-selected ステート（状態）をトグルし、選択されている aria-selected の状態を false なら true に、true なら false に変更する。aria-activedescendant の値を、オプションが非選択へトグルされている場合でも、ユーザーが直前に対話したオプションの id に更新します。aria-selected ステート (状態) をトグルし、aria-selected の状態を false なら true に、true なら false に変更します。aria-activedescendant の値を、ユーザーが直前にインタラクトしたオプションの id に更新します。 ARIA の最初のルールは、要素を再定義し、ARIA のロール、ステート、プロパティを追加してアクセス可能にするのではなく、すでに組み込まれている意味論と挙動を持つネイティブな機能を使用できることです。 <option> 要素を子孫に持つ <select> 要素は、必要な全てのインタラクションをネイティブに処理します。
ARIA の使用の第一のルールは、要素を転用して ARIA のロール、ステート、プロパティを追加することでアクセス可能にするのではなく、必要としている意味論と振る舞いがすでに組み込まれているネイティブな機能を使用できることです。 <option> 要素を子孫に持つ <select> 要素は、必要な全てのインタラクションをネイティブに処理します。
以下のスニペットは、listbox ロールが HTML ソースコードに直接どのように追加されるかを示しています。
以下のスニペットは、リストボックスロールが HTML ソースコードに直接どのように追加されるかを示しています。
<p id="listbox1label" role="label">色を選択:</p> <div role="listbox" tabindex="0" id="listbox1" aria-labelledby="listbox1label" @@ -158,19 +162,19 @@ translation_of: Web/Accessibility/ARIA/Roles/listbox_roleより多くの例
size 属性を持つ HTML の <select> と同様な、スクロールしてより多くのオプションを表示する単一選択リストボックス。（英語）size="1" を持つ HTML の <select> と同様な、アクティブにすると展開される単一選択の折りたたみ可能なリストボックス。（英語）size 属性を持つ HTML の <select> と同様な、スクロールしてより多くのオプションを表示する単一選択リストボックス。 (英語)size="1" を持つ HTML の <select> と同様な、アクティブにすると展開される単一選択の折りたたみ可能なリストボックス。 (英語)aria-labelledby プロパティが設定されている必要があります。aria-* プロパティを設定する必要があります（ARIA のベストプラクティス（英語）を参照）。combobox ロールがより適切かもしれません。aria-labelledby プロパティが設定されているべきです。aria-* プロパティを設定する必要があります (ARIA のベストプラクティス (英語) を参照) 。combobox) ロールの方がより適切かもしれません。combobox ロールoption ロールlist ロール<select> 要素<label> 要素<option> 要素combobox ロールoption ロールlist ロールlistitem ロール