Tabs Navigation

Die tabs Komponente gliedert Inhalte in umschaltbare Bereiche. Der Inhalt der Registerkarten wird über HTMX-Anfragen geladen, sodass Seitenbereiche umgeschaltet werden können, ohne dass die gesamte Seite neu geladen werden muss.

Block Tag
JavaScript
HTMX

Funktionen

  • HTMX-Integration: Inhalte werden beim Anklicken der Registerkarten asynchron geladen.

  • Aktiver Zustand: Visuelle Anzeige der aktuell ausgewählten Registerkarte.

  • Tastaturnavigation: Wechseln zwischen den Registerkarten mit den Pfeiltasten.

  • URL-basierte Registerkarten: Jede Registerkarte kann Inhalte von einer anderen URL laden.

HTML
JS

Verwendung

Die Komponente wird über das tabs Tag eingebunden.

{% load layout_tags %} {# Config mode (HTMX) #} {% tabs config=tabs_config %}{% endtabs %} {# Block mode (static content) #} {% tabs id="example" label="Example Tabs" %} {% tab id="first" label="First Tab" active=True %} <p>First tab content</p> {% endtab %} {% tab id="second" label="Second Tab" %} <p>Second tab content</p> {% endtab %} {% endtabs %}

Parameter

Laden…

config (TabsConfig oder als kwargs oder als Kombination aus beidem)

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
tag_id str

Eindeutige Tag-ID für die Identifizierung des Elements im JavaScript.

 None True
tabs

Liste der Tab-Buttons.

 None True
label str

Nicht sichtbarer, zusätzlicher Titel, welcher nur von Screenreadern vorgelesen wird.

 "" False
TabsConfig( tag_id="settings-tabs", label="Settings", tabs=[ TabConfig(tag_id="general", title="General", request_url=reverse("conf_general"), active=True), TabConfig(tag_id="security", title="Security", request_url=reverse("conf_security")), TabConfig(tag_id="notifications", title="Notifications", request_url=reverse("conf_notifications")), ], )

Barrierefreiheit

WCAG AA WCAG AAA
Status

WCAG AA (Grundlagen)

  • Vollständiges ARIA-Tab-Muster: role='tablist', role='tab', role='tabpanel'.

  • Die Tab-Liste verfügt über ein aria-label, das ihren Zweck beschreibt.

  • Die Registerkarten verwenden aria-controls, um eine Verbindung zu ihren Bereichen herzustellen.

  • Das Tabpanel verfügt über das Attribut aria-label zur barrierefreien Benennung.

  • aria-selected wird dynamisch aktualisiert, um die aktive Registerkarte anzuzeigen.

  • Verwaltung von tabindex: Der aktive Reiter hat den Wert 0, inaktive Reiter haben den Wert -1.

WCAG AAA (Erweitert)

  • Vollständige Tastaturnavigation: Mit den Pfeiltasten nach links/rechts zwischen den Registerkarten wechseln, mit „Pos1“/„Ende“ zur ersten/letzten Registerkarte springen.

  • Bei der Navigation mit den Pfeiltasten wird der Fokus automatisch verschoben.

Offene Punkte

  • Den Tab-Panels fehlt das Attribut aria-labelledby, das auf den zugehörigen Tab-Button verweist.

Verwandte Themen