このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
aria-expanded
aria-expanded 属性は要素に設定され、コントロールが展開されているか折りたたまれているか、および制御される要素が表示されているかどうかを示します。
解説
メニュー、ダイアログ、アコーディオンパネルなど、展開したり折りたたんだりできるウィジェットがいくつかあります。これらの各オブジェクトには、開閉を制御するインタラクティブな要素があります。aria-expanded 属性は、オブジェクトの表示/非表示を切り替える、フォーカス可能で対話可能なコントロールに適用されます。
例えば、aria-expandedは DOM ツリー内の親アイテムに適用され、その子の枝が表示されるかどうかを示します。親は、関連付けられている子の枝の可視性を制御します。
別のオブジェクトの可視性を制御するオブジェクトに適用できる宣言は 2 つあります。aria-controls、もしくはaria-expandedと組み合わせるaria-owns です。aria-controls とaria-owns は制御する要素と制御される要素の関係を示します。aria-expanded は制御される要素が展開されているか折りたたまれているかを支援技術に示します。
展開可能なグループ化コンテナーを所有する要素でaria-owns 属性を使用してください。展開可能および折りたたみ可能なグループ化コンテナーがaria-expanded 属性を持つ要素によって所有されていない場合は、代わりにaria-controls 属性を使用してグループ化コンテナーを参照します。
ボタン
ウィジェットを切り替えるボタンは、切り替えられるウィジェットのid がaria-controls に設定され、aria-expanded がウィジェットの現在の状態に設定されている必要があります。
<button aria-expanded="false" aria-controls="widget1">Toggle widget</button>ウィジェットが表示されている場合、制御オブジェクトはaria-expanded="true" を設定することでその情報を伝えます。制御オブジェクトのアクセシブル名は、この変更を反映する必要があります。
<button aria-expanded="true" aria-controls="widget1">Toggle widget</button>メニュー
menu が表示されている場合、そのメニューの表示/非表示を切り替えるボタンオブジェクトにはaria-expanded="true" が設定されます。メニューが非表示の場合、aria-expanded は省略できます。メニューが非表示のときに指定する場合は、aria-expanded="false" に設定する必要があります。子メニューが表示されていない場合、その親のmenuitem はaria-expanded を持っています。子メニューが表示されている場合はtrue に設定する必要があります。
コンボボックス
デフォルトで非表示または折りたたまれているロールもあれば、表示されているか展開されているロールもあります。combobox ロールを持つ要素のaria-expanded の既定値はfalse です。コンボボックスのポップアップが表示されていない場合、combobox ロールを持つ要素のaria-expanded はfalse に設定されています。これがデフォルトの状態です。ポップアップ要素が表示されている場合は、aria-expanded をtrue に設定する必要があります。
<label for="username">Username</label><input name="username" aria-describedby="username-desc" /><button aria-expanded="false" aria-controls="username-desc" aria-label="Help about username" type="button"> <span aria-hidden="true">?</span></button><p hidden> Your username is the name that you use to log in to this service.</p>メモ:aria-expanded 属性の存在は制御を示します。他の要素の展開状態を制御しない要素にこの属性を含めないようにしてください。
Treeitems
親ノードとして機能するtreeitem ロールの各要素は、ノードが閉じた状態のときはaria-expanded="false" を持ち、ノードが開いた状態のときはaria-expanded="true" を持ちます。子孫ノードを持たないノードである葉ノードには、aria-expanded 属性を設定しないでください。この属性を設定すると、支援技術に対して誤って親ノードとして説明されてしまうためです。
Rows
treegrid の親の行は、展開または折りたたんで、テーブルまたはグリッド内の一連の子の行を表示または非表示にできる行です。各親の行には、行要素または行に含まれるセルにaria-expanded 状態が設定されます。子の行が非表示の場合、aria-expanded="false" が設定されます。子の行が表示されている場合、aria-expanded="true" が設定されます。子の行の表示を制御しない行には、aria-expanded 属性を含めないでください。属性を含めると、行が親の行として定義されてしまうためです。
値
falseこの要素が所有または制御するグループ化要素は折りたたまれています。
trueこの要素が所有または制御するグループ化要素は展開されています。
undefined(既定値)要素は、展開可能なグループ化要素を所有または制御しません。
関連インターフェイス
Element.ariaExpandedElementインターフェイスの一部であるariaExpandedプロパティは、aria-expanded属性の値を反映します。ElementInternals.ariaExpandedElementInternalsインターフェイスの一部であるariaExpandedプロパティは、aria-expanded属性の値を反映します。
関連付けられたロール
使用するロール:
継承先のロール:
仕様書
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # aria-expanded |