ARIA: option ロール

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 要素を考えてみましょう。

html

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

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

html

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

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

html

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

ARIA: option ロール

解説

子孫はすべて presentation になる

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

関連するロール

状態とプロパティ

仕様書

関連情報