Tabsfunktion

Eine Tabsfunktion, auch Registerkarten- oder Tab-Navigation genannt, ist ein Benutzerschnittstellenmuster, das mehrere Inhaltsbereiche in einem einzigen Fenster organisiert. Jeder Bereich wird in einem separaten Panel gespeichert und über zugehörige Registerkarten zugänglich gemacht. Beim Auswählen einer Registerkarte wird das zugehörige Panel sichtbar und die anderen bleiben verborgen. Dieses Muster erhöht die Übersichtlichkeit, indem verwandte Informationen kompakt zusammengefasst werden.

Aufbau: eine Registerkartenleiste (Tablist) mit mehreren Reitern, ein aktiver Reiter und die dazugehörigen Inhalts-Panels (Tabpanels). Der Wechsel erfolgt meist per Maus oder Fingertipp; Tastaturunterstützung ist üblich, etwa durch Pfeiltasten zum Fokuswechsel und Enter/Space zum Aktivieren eines Tabs. In vielen Anwendungen gelten zusätzlich Shortcuts wie Strg+Tab zum Durchblättern der Tabs.

Vorteile und Design: Tabs eignen sich zur Gruppierung verwandter Inhalte, ohne mehrere Fenster zu benötigen. Wichtige Designentscheidungen betreffen Beschriftung, Reihenfolge, Konsistenz und visuelle Hervorhebung des aktiven Tabs. Für Barrierefreiheit ist eine klare Beschriftung, fokussierbare Tabs und ARIA-Rollen wichtig, damit Screenreader den Zusammenhang erkennen.

Implementierung: In Webanwendungen folgen Tabs oft dem ARIA-Standard: role="tablist" für die Leiste, role="tab" für jeden Reiter und role="tabpanel" für das Panel. JavaScript verwaltet den aktiven Tab und die Sichtbarkeit der Panels; CSS regelt Layout und Stil. Viele Desktop- und Mobil-Frameworks bieten fertige Tab-Komponenten, die ähnliche Verhaltensweisen liefern.