option ロールはlistbox で選択可能な項目に使用します。

解説

option ロールはlistbox 内でユーザーが選択できるものを識別するために使用します。これらの選択肢は<select> 要素内の<option> 要素と似ていますが、画像を格納することができます。

選択可能な選択肢はすべて、aria-selected をその状態に一致させる必要があります（選択されているときはtrue、選択されていないときはfalse）。選択肢が選択可能でない場合、aria-selected は省略できます。無効になった選択肢は、aria-disabled="true" とaria-selected="false" を設定し、ユーザーに、無効ではあるが選択肢が存在することを説明します。

option ロールはlistbox の選択可能な選択肢を特定するためのものです。選択肢にはアクセシブル名を指定しなければなりません。一般的に、選択肢のアクセシブル名は要素の子孫コンテンツから決まります。

作成者は、選択肢の役割を持つ要素にaria-label またはaria-labelledby を指定することによって、アクセシビリティ名を明示的に提供することもできます。aria-label またはaria-labelledby を使用し、選択肢が可視のテキストラベルも表示する場合、作成者はWCAG Success Criterion 2.5.3 Label in Name を保証しなければなりません。

使用可能な場合は、代わりに<select> 要素かcheckbox またはradio 型の<input> 要素を使用することを強く推奨します。これらのネイティブ　HTML　要素はキーボード操作機能を提供し、すべての子孫要素のフォーカスを自動的に管理します。

子孫はすべて presentation になる

一部の種類のユーザーインターフェイス部品は、プラットフォームのアクセシビリティ API で表したとき、テキストしか含むことができません。アクセシビリティ API にはoption に含まれる意味づけ要素を表す方法がありません。この制限に対応するために、ブラウザーは自動的にoption 要素の子孫要素すべてにpresentation ロールを適用します。

例えば、見出しを格納した次のoption 要素を考えてみましょう。

<div role="option"><h3>私の意見のタイトル</h3></div>

option の子孫が存在するので、以下のコードと等価になります。

<div role="option"><h3 role="presentation">私の意見のタイトル</h3></div>

支援技術ユーザーの視点から見ると、上記のコードスニペットはアクセシビリティツリー上では次のものと等価になるので、見出しは存在しないことになります。

<div role="option">私の意見のタイトル</div>

関連する WAI-ARIA のロール、状態、プロパティ

関連するロール

listbox

選択肢はlistbox に格納されているか、またはlistbox が自分自身で所有している必要があります。

状態とプロパティ

aria-selected

選択肢の選択状態を記述するために使用します。必須です。

aria-checked

選択肢を複数選択で使用する場合のチェック状態を記述するために使用します。true、false、mixed に対応しています。オプションです。

aria-posinset

一度にいくつかの選択肢しか存在しない仮想スクロールのように、選択肢の集合が DOM と一致しない場合に、その位置を記述するために使用します。オプションです。

aria-setsize

選択肢の総数を宣言するためにaria-posinset と共に使用します。オプションです。

aria-disabled

選択肢が存在していますが、編集できません。オプションです。

aria-hidden

アクセシビリティツールから選択肢を非表示にするために使用します。冗長なコンテンツなど、支援技術の使い勝手を向上させる場合にのみ、非表示のコンテンツや表示可能なコンテンツを非表示にするために使用しましょう。オプションです。

aria-invalid

選択肢の値がアプリケーションによって不正な値とみなされることを示すために使用します。オプションです。

aria-busy

読み込んでいる間など、要素が変更されていることを示すために使用します。オプションです。

aria-labelledby

どの要素が選択肢をラベル付けするかを示すために用います。適切な場合には、選択肢のコンテンツを代わりに使用してください。オプションです。

aria-label

オプションのラベル付けに用います。ラベルが DOM に存在する場合、代わりにaria-labelledby を使用してください。オプションです。

（さらなる詳細と ARIA の状態とプロパティの完全なリストについては、ARIAoption (role) のドキュメントを参照してください。）

仕様書

関連情報

• HTML<select> 要素
• HTML<label> 要素
• HTML<option> 要素
• ARIA:combobox ロール
• ARIA:list ロール
• ARIA:listbox ロール