aria-expanded属性
aria-expanded属性は要素の開閉の状態を示すためのWAI-ARIAの属性です。
値にはtrue/falseのboolean値を指定することができtrue(開いている状態)、false(閉じている状態)を示すことができます。
以下のサンプルでは展開を制御しているbutton要素に対してaria-expanded属性を指定して、#panel1が開いている状態、#panel2が閉じている状態であることを示します。
<ul role="tablist">
<li role="tab"><button aria-controls="panel1" aria-expanded="true">tab1</button></li>
<li role="tab"><button aria-controls="panel2" aria-expanded="false">tab2</button></li>
</ul>
<div role="tabpanel" aria-hidden="false" id="panel1">panel1</div>
<div role="tabpanel" aria-hidden="true" id="panel2">panel2</div>
開閉状態はaria-hidden属性、トリガーとターゲットの関連付けはaria-controls属性を利用しています。
以下のサンプルでは展開を制御しているbutton要素の親要素に対してaria-expanded属性を指定しています。
<div aria-expanded="true">
<button>button1</button>
<div aria-hidden="false">panel1</div>
</div>
<div aria-expanded="true">
<button>button2</button>
<div aria-hidden="true">panel2</div>
</div>
参考URL
aria-expanded - WAI-ARIA - W3C
登録日 : 2015年07月23日 最終更新日 : 2018年10月26日
同じカテゴリー(WAI-ARIA)のエントリー
- aria-required属性
- aria-current属性
- aria-orientation属性
- aria-multiselectable属性
- aria-multiline属性
- aria-live属性
- aria-level属性
- aria-labelledby属性
- aria-label属性
- aria-invalid属性
- aria-hidden属性
- aria-haspopup属性
- aria-grabbed属性
- aria-flowto属性
- aria-expanded属性
- aria-dropeffect属性
- aria-disabled属性
- aria-describedby属性
- aria-checked属性
- aria-controls属性
- aria-busy属性
- aria-autocomplete属性
- aria-atomic属性
- aria-activedescendant属性
- role属性