0Pricing
HTML Academy · Lektion

aria-expanded und aria-controls für Umschalter

Erstellen Sie mit ARIA zugängliche Aufklapp- und Akkordeonkomponenten

aria-expanded und aria-controls für Umschalter ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Überblick über das Toggle-Muster

Toggle-Steuerelemente (Akkordeons, Dropdowns, Menüs) benötigen ARIA, um ihren geöffneten bzw. geschlossenen Zustand mitzuteilen:

  • aria-expanded – gibt den geöffneten bzw. geschlossenen Zustand eines Steuerelements an
  • aria-controls – verknüpft das Steuerelement mit dem von ihm gesteuerten Element

aria-expanded

aria-expanded teilt mit, ob ein gesteuertes Element erweitert oder reduziert ist:

<button aria-expanded="false" aria-controls="menu">
  Menu
</button>
<ul id="menu" hidden>
  <li><a href="/">Home</a></li>
</ul>
<script>
btn.addEventListener('click', () => {
  const expanded = btn.getAttribute('aria-expanded') === 'true';
  btn.setAttribute('aria-expanded', !expanded);
  menu.hidden = expanded;
});
</script>

aria-controls

aria-controls verweist auf die id des gesteuerten Elements:

<button
  id="details-btn"
  aria-expanded="false"
  aria-controls="details-panel"
>
  Show Details
</button>
<div id="details-panel" hidden>
  <p>Additional details go here...</p>
</div>
<!-- Screen reader: 'Show Details, button, collapsed'
     After click: 'Show Details, button, expanded' -->

Akkordeon-Muster

Barrierefreies Akkordeon mit aria-expanded:

<div class="accordion">
  <h3>
    <button
      aria-expanded="false"
      aria-controls="panel-1"
    >Section 1</button>
  </h3>
  <div id="panel-1" hidden>
    <p>Panel 1 content...</p>
  </div>

  <h3>
    <button
      aria-expanded="false"
      aria-controls="panel-2"
    >Section 2</button>
  </h3>
  <div id="panel-2" hidden>
    <p>Panel 2 content...</p>
  </div>
</div>

Dropdown-Menü-Muster

Barrierefreies Navigations-Dropdown:

<nav>
  <button
    aria-expanded="false"
    aria-haspopup="true"
    aria-controls="products-menu"
  >Products</button>

  <ul id="products-menu" role="menu" hidden>
    <li role="menuitem"><a href="/widget">Widget</a></li>
    <li role="menuitem"><a href="/gadget">Gadget</a></li>
  </ul>
</nav>

aria-haspopup

aria-haspopup weist darauf hin, dass durch die Aktivierung des Steuerelements ein Popup geöffnet wird:

<button aria-haspopup="menu">File</button>
<!-- Values: true (menu), menu, listbox, tree, grid, dialog -->
<!-- Screen reader: 'File, button, has popup' -->

<!-- Note: aria-haspopup="true" is equivalent to "menu" -->
<!-- Use specific values when the popup type matters -->

ARIA-Ergänzung für Details/Summary

Das native details/summary teilt den Erweiterungszustand bereits mit – ARIA ist nicht erforderlich:

<details>
  <summary>FAQ Question</summary>
  <p>Answer goes here.</p>
</details>
<!-- Browser automatically provides aria-expanded
     and the disclosure widget semantics -->
<!-- No need to add aria-expanded manually to summary -->

CSS für den aria-expanded-Zustand

Verwenden Sie aria-expanded als CSS-Hook:

/* Panel hidden by default: */
[aria-controls] + [hidden] {
  display: none;
}

/* Or using aria-expanded on the button: */
[aria-expanded="false"] + .panel {
  display: none;
}

[aria-expanded="true"] + .panel {
  display: block;
}

/* Rotate arrow icon: */
[aria-expanded="true"] .arrow {
  transform: rotate(180deg);
}

Tastaturanforderungen für Toggles

Toggle-Komponenten müssen die Interaktion per Tastatur unterstützen:

  • Enter oder Leertaste – aktiviert die Toggle-Schaltfläche
  • Escape – schließt ein Dropdown oder Menü
  • Pfeiltasten – navigieren innerhalb eines geöffneten Menüs

Fokusverwaltung nach dem Umschalten

Verwalten Sie den Fokus nach dem Umschalten von Inhalten angemessen:

// Accordion: focus stays on the button (usually OK)
// Dropdown menu: move focus to first menu item on open

button.addEventListener('click', () => {
  const expanded = button.getAttribute('aria-expanded') === 'true';
  button.setAttribute('aria-expanded', !expanded);
  panel.hidden = expanded;

  if (!expanded) {
    // Opening a dropdown: focus first item
    panel.querySelector('a, button, [tabindex]')?.focus();
  }
});

Besonderheiten auf Mobilgeräten

Toggle-Komponenten auf Mobilgeräten:

  • Touch-Ziele müssen mindestens 44×44px groß sein (WCAG 2.5.5)
  • aria-expanded wird von mobilen Screenreadern unterstützt (iOS VoiceOver, Android TalkBack)
  • Wischgesten ersetzen nicht die Aktivierung per Tastatur oder Schaltfläche

Kurztest

Welchen Wert sollte aria-expanded haben, wenn der gesteuerte Bereich ausgeblendet ist?

Zusammenfassung: aria-expanded und aria-controls

Die wichtigsten Punkte zu Toggle-ARIA:

  • aria-expanded="true/false" – geöffneter bzw. geschlossener Zustand des Steuerelements
  • aria-controls="id" – verknüpft das Steuerelement mit seinem Panel
  • aria-haspopup – weist auf ein verfügbares Popup hin
  • Aktualisieren Sie aria-expanded bei jedem Umschalten
  • Verschieben Sie den Fokus in das geöffnete Menü und beim Schließen zurück zum Auslöser

Häufig gestellte Fragen

Ist die Lektion „aria-expanded und aria-controls für Umschalter“ kostenlos?

Ja — der vollständige Text von „aria-expanded und aria-controls für Umschalter“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „aria-expanded und aria-controls für Umschalter“?

Erstellen Sie mit ARIA zugängliche Aufklapp- und Akkordeonkomponenten Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „aria-expanded und aria-controls für Umschalter“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. aria-expanded und aria-controls für Umschalter
  2. aria-selected und Tab-Muster
  3. Live-Regionen: aria-live aria-atomic aria-relevant
  4. Testen mit Screenreadern
← Zurück zu HTML Academy