Die Inhaltselemente des Contao Themes im Überblick.

Nicht exklusives Akkordeon, animiert mit JavaScript

Mit einem Akkordeon kannst du umfangreiche Inhalte platzsparend präsentieren. Die einzelnen Elemente des Akkordeons lassen sich sowohl via Mausklick als auch per Tastatureingabe (Enter- oder Leertaste) ein- und ausklappen. Mehrere Akkordeon-Elemente können gleichzeitig geöffnet sein (nicht exklusives Akkordeon). JavaScript erweitert die Funktionalität des Akkordeons. Es sorgt für ein rollendes Öffnen und Schließen der Akkordeon-Elemente. Bei deaktiviertem JavaScript öffnen sich die Akkordeon-Elemente zwar abrupt, sie bleiben aber voll funktionsfähig.

Wenn du den Einsatz eines Akkordeons erwägst, solltest du folgende Punkte bedenken: Ausgeblendete Inhalte sind nach dem Öffnen einer Seite im Browser zunächst nicht sichtbar. Besucher*innen deiner Website haben möglicherweise Schwierigkeiten, diese Inhalte zu finden. Vielleicht erkennen sie den Klappmechanismus der Akkordeon-Elemente nicht. Oder es fehlt der Anreiz, die Akkordeon-Elemente zu öffnen.

Zudem läufst du Gefahr, dass Suchende auf deiner Website nicht das finden, wonach sie suchen.

Woran liegt das?

1. Suchende klicken auf einen Suchmaschineneintrag, der das gesuchte Schlüsselwort enthält, und landen auf deiner Website. Dort ist das erwartete Schlüsselwort dann aber nicht zu finden, weil es sich in einem geschlossenen Akkordeon-Element befindet.
2. Selbst wenn die Suchenden, sofern sie keinen Chromium-basierten Browser verwenden, mit STRG+F die Seite durchsuchen, werden sie nicht fündig. Sie könnten sich veranlasst sehen, deine Website wegen des nicht auffindbaren Schlüsselwortes vorzeitig zu verlassen. Ein "manuelles" Suchen auf der Seite ist vielen zu mühsam.

Ich empfehle dir daher, die Vor- und Nachteile abzuwägen, bevor du dich für die Verwendung eines Akkordeons entschließt.

Du kannst mehrere Akkordeons gleichzeitig auf einer Seite einbinden.

Für eine strukturierte Darstellung deiner Daten stehen dir ein einfacher und ein mehrdimensionaler Tabellentyp zur Verfügung. In der mobilen Ansicht werden bei beiden Tabellentypen Kopfzellen und Datenzellen aufeinandergestapelt und jeweils in einer Gruppe zusammengefasst. Die Datenzellen sind gelabelt, damit diese den Kopfzellen korrekt zugeordnet werden. Die Label stellen zudem sicher, dass Screenreader die Tabellen sowohl in der Desktop- als auch in der mobilen Ansicht korrekt wiedergeben. Der einfache Tabellentyp besitzt einen horizontalen Tabellenkopf, der mehrdimensionale Tabellentyp einen horizontalen und zusätzlich einen vertikalen Tabellenkopf.

Registerkarten (Tabs)

Mit Registerkarten steht dir ebenfalls eine Komponente zur Verfügung, die Inhalte platzsparend bereithält. Allerdings gilt auch für die Registerkarten, dass dadurch den Besucher*innen Inhalte unter Umständen vorenthalten werden. Der Einsatz von Registerkarten sollte daher wohl überlegt sein.

Du kannst mehrere Registerkartenabschnitte gleichzeitig auf einer Seite einbinden.