Ein Akkordeon ist sinnvoll, wenn Leser einzelne vertiefende Abschnitte gezielt öffnen möchten. Es ist ungeeignet, wenn alle Besucher den versteckten Inhalt kennen müssen. Eine kürzere sichtbare Seite ist nicht automatisch eine verständlichere Seite.
Überschriften als Entscheidungshilfe
Die Dokumentation GOV.UK Accordion zeigt vier geschlossene Abschnitte zum Schreiben fürs Web. Die Titel benennen unterschiedliche Themen. Ein gemeinsames Bedienelement bietet an, alle Abschnitte zu öffnen. Wer nur einen Teil braucht, kann gezielt auswählen; wer vergleichen möchte, ist nicht auf genau einen offenen Bereich beschränkt.
GOV.UK empfiehlt, vor dem Einsatz zu prüfen, ob die Vorteile das Verbergen rechtfertigen. Die Komponente ist keine pauschale Empfehlung, lange Seiten zusammenzufalten. Ob Besucher eine wichtige Antwort finden, muss an der tatsächlichen Seite überprüft werden.
Welche Inhalte offen bleiben sollten
Auf einer Angebotsseite gehören grundlegender Leistungsumfang und wesentliche Bedingungen in den normalen Lesefluss. Eine optionale Erklärung zur technischen Durchführung könnte dagegen einklappbar sein. Entscheidend ist, ob die Information für die zentrale Entscheidung erforderlich ist.
Ein häufiger Irrweg: Ein unklarer Text wird in viele kleine Akkordeons zerlegt, ohne die Fragen zu verbessern. Der Leser muss dann nacheinander alles öffnen, um das Angebot überhaupt zu verstehen. Überarbeite zuerst Inhalt und Überschriften. Vielleicht genügen eine klar gegliederte Seite und ein Inhaltsverzeichnis.
Prüfe den Zustand, nicht nur das Symbol
Eine zugängliche Umsetzung braucht verständliche Buttons und eine programmatisch erkennbare Information darüber, ob der Abschnitt geöffnet ist. Das WAI-ARIA Accordion Pattern beschreibt die relevanten Beziehungen und Tastaturaktionen. Ein gedrehter Pfeil allein vermittelt den Zustand assistiven Technologien nicht.
Teste jede Überschrift mit Tab und aktiviere sie mit der Tastatur. Bleibt der Fokus am auslösenden Element? Kannst du den geöffneten Inhalt in sinnvoller Reihenfolge erreichen? Bei mehreren offenen Abschnitten sollte die Orientierung nicht verloren gehen. Prüfe außerdem Drucken und die Darstellung ohne JavaScript.
Ein einfacher Entscheidungstest
Schreibe neben jeden geplanten Abschnitt, wer ihn benötigt. Steht überall „alle“, spricht das gegen das Verstecken. Stehen dort unterschiedliche Aufgaben oder Situationen, lohnt sich ein Vergleich mit einer offenen Version. Beobachte, ob Menschen den richtigen Abschnitt anhand seines Titels finden, ohne alles auszuprobieren.
Entscheide zuerst, was offen bleiben muss
Ordne Informationen nach ihrer Bedeutung für die aktuelle Aufgabe. Voraussetzungen, entscheidende Kostenbestandteile oder eine notwendige Warnung dürfen nicht beiläufig verschwinden, nur weil die Seite sonst länger wird. Ein Akkordeon eignet sich eher für ergänzende Antworten, die nicht jede Person benötigt. Diese Grenze ergibt sich aus dem Inhalt und kann auf zwei Seiten unterschiedlich verlaufen.
Eine Produktseite kann beispielsweise eine kurze sichtbare Zusammenfassung der Lieferung zeigen und zusätzliche Details darunter öffnen lassen. Wenn die Lieferbedingungen über die grundsätzliche Nutzbarkeit des Angebots entscheiden, reicht ein allgemeiner Abschnittstitel „Mehr erfahren“ nicht. Die Person muss erkennen können, dass hinter diesem Titel eine relevante Antwort liegt.
Überschriften müssen eine Auswahl ermöglichen
Lies nur die geschlossenen Abschnittstitel nacheinander. Kannst du daraus ableiten, wo eine konkrete Frage beantwortet wird? Titel wie „Weitere Informationen“ oder „Sonstiges“ sind dafür häufig zu unspezifisch. Benenne die Themen so, dass die Besucher nicht mehrere Bereiche versuchsweise öffnen müssen.
Überlege außerdem, ob Inhalte miteinander verglichen werden sollen. Wenn automatisch immer nur ein Bereich geöffnet bleiben darf, kann der Vergleich unnötig erschwert werden. Das Verhalten sollte zur Aufgabe passen. Eine platzsparende Darstellung ist kein Selbstzweck, wenn sie ständig Informationen wieder verbirgt, die gerade gebraucht werden.
Verborgener Inhalt bleibt echter Inhalt
Plane den Zugriff über Links, Suche und Drucken mit. Ein direkter Verweis auf eine bestimmte Antwort sollte die Person nicht vor einem geschlossenen Bereich ohne Orientierung absetzen. Auch beim Öffnen und Schließen muss die Position nachvollziehbar bleiben. Große unerwartete Verschiebungen können dazu führen, dass der gerade gelesene Zusammenhang verloren geht.
Prüfe den Ablauf mit Tastatur: Welcher Abschnitt hat den Fokus, wie wird er geöffnet und ist sein Zustand verständlich? Die offene Darstellung allein beantwortet diese Fragen nicht. Teste zusätzlich eine lange Überschrift und einen umfangreichen Inhalt auf dem Smartphone. Wenn die Komponente mehr Bedienaufwand erzeugt, als sie an Orientierung gewinnt, ist ein normal gegliederter Text häufig die bessere Lösung.
Für längere Seiten können aussagekräftige Links und eine gute Gliederung bereits viel lösen. Geht es um die Position innerhalb der gesamten Website, sind dagegen Breadcrumbs das passendere Orientierungsmittel.
