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)のエントリー

検索

スポンサードリンク

バージョン

リファレンス