Accordion Navigation

Die accordion Komponente zeigt erweiterbare Abschnitte zur Gliederung von Inhalten an. Wenn ein Abschnitt geöffnet wird, wird automatisch ein URL-Anker für Deep-Links gesetzt.

WCAG AA
WCAG AAA
JavaScript

Funktionen

  • Exklusivmodus: Optional kann festgelegt werden, dass jeweils nur ein Abschnitt geöffnet sein darf.

  • URL-Anker: Abschnitte können beim Laden der Seite über einen URL-Hash aufgerufen werden.

  • Automatischer Bildlauf: Scrollt automatisch zum aufgeklappten Abschnitt.

  • Ausgangszustand: Abschnitte können standardmäßig als „offen“ konfiguriert werden.

HTML
JS

Verwendung

Die Komponente wird über das accordion Tag eingebunden.

{% load insight_tags %} {% accordion config=accordion_config %} <!-- or --> {% accordion tag_id="faq-exclusive" items=accordion_items exclusive=True %}

Parameter

Laden…

config (AccordionConfig 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
items

Liste der einzelnen Abschnitte.

 [] False
exclusive bool

Bei True kann immer nur ein Abschnitt gleichzeitig geöffnet sein.

 True False
AccordionConfig( tag_id="faq-accordion", items=[ AccordionItemConfig(title="What is Django?", content="Django is..."), AccordionItemConfig(title="What is HTMX?", content="HTMX is..."), ], exclusive=True, )

Barrierefreiheit

WCAG AA WCAG AAA
Status

WCAG AA (Grundlagen)

  • Das aktuell geöffnete Element wird mit aria-expanded='true' markiert.

  • Die Kopfzeile ist mit aria-controls ausgestattet, wodurch der Bezug zum darunter liegenden Container hergestellt wird.

  • Der Container besitzt zusätzlich das Attribut aria-labelledby.

  • Der Container ist mit role='region' ausgestattet, damit dieser leicht ansteuerbar ist.

  • Für die Tastaturnavigation steht eine sichtbare Fokusanzeige (focus-visible:ring) zur Verfügung.

  • Das dekorative Chevron-Icon übernimmt den Attributwert aria-hidden='true' von der Icon-Komponente.

WCAG AAA (Erweitert)

  • Vollständige Tastaturnavigation: Mit den Pfeiltasten „Nach oben“ und „Nach unten“ zum wechseln zwischen den Überschriften, mit „Pos 1“ und „Pos 10“ kann zum Anfang bzw. zum Ende gesprungen werden.

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

Verwandte Themen