HTML/Attribute/aria-controls

Das aria-controls-Attribut ordnet einem Element wie einem Button ein Element zu, dass durch dieses gesteuert wird.

erlaubte Werte	id des zugeordneten Elements
default-Wert	-
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
• Navigation
  • Flyout-Menü
    Kennzeichnung ob Menü ausgeblendet oder angezeigt wird.

Weblinks

• W3C: aria-controls
• MDN: aria-controls

{{{{{Inhaltsverzeichnis}}}}}