HTML/Attribute/aria-expanded

Das aria-expanded-Attribut zeigt an, ob ein Element oder eine Gruppierung gerade aus- oder eingeklappt ist.

erlaubte Werte	true / false / undefined
default-Wert	undefined
erlaubt in	allen Elementen
Browsersupport	Details bei caniuse.com: {{{caniuse}}}

Beispiel

<nav>
	<button id="toggle" aria-expanded="true" aria-controls="menu">
		<span class="visually-hidden">Menu auf- und zuklappen</span>
	</button>
	<ul class="menu">
		<li><a aria-current="page">Home</a> </li>
		<li><a href="#">Seite 2</a> </li>
		<li><a href="#">Seite 3</a> </li>
		<li><a href="#">Seite 4</a> </li>
		<li><a href="#">Kontakt</a> </li>
	</ul>
</nav>

Der Button wird mit aria-controls der Liste zugordnet. Mit aria-expanded wird vorgelesen, ob das Menü aus- oder eingeklappt ist.

Siehe auch

• WAI-ARIA
• aria-controls
• Navigation
  • Flyout-Menü
    Kennzeichnung ob Menü ausgeblendet oder angezeigt wird.

Weblinks

• W3C: aria-expanded
• MDN: aria-expanded

{{{{{Inhaltsverzeichnis}}}}}