Ein Accordion ist ein Bedienelement, das Inhalte hinter aufklappbaren Überschriften verbirgt. Sichtbar sind zunächst nur die Titel, der Text erscheint auf Klick. Die Überschriften stehen meist untereinander, seltener nebeneinander als Spalten. Am häufigsten steckt dahinter eine Liste häufiger Fragen.
- Accordion
Bedienelement, das Inhalte hinter aufklappbaren Überschriften zusammenfaltet und sie erst auf Klick zeigt.
Beispiel: „Die Fragen auf der Preisseite liegen in einem Accordion, damit die Seite kurz bleibt.“Auch: Akkordeon oder Ausklappmenü. Der Name kommt vom Musikinstrument, dessen Falten sich auf gleiche Weise öffnen und schließen.
Abgrenzung zu Tabs: Tabs zeigen gleichrangige Inhalte nebeneinander, von denen immer einer offen ist. Ein Accordion stapelt sie untereinander und darf auch vollständig geschlossen sein.
Wann ein Accordion hilft
Ein Accordion lohnt sich für Inhalte, die viele Besucher überspringen und einige genau brauchen. Fragen und Antworten sind der Standardfall, ebenso technische Angaben zu einem Produkt oder die Details einer Leistung. Der Besucher sieht die Überschriften als Inhaltsverzeichnis und öffnet, was ihn angeht.
Inhalte, die jeder lesen soll, gehören dagegen offen auf die Seite. Ein zugeklappter Text wird von einem Teil der Besucher nie geöffnet, weil der Klick eine Hürde ist. Für die Indexierung ist das Zuklappen unkritisch, denn der Text steht im Quelltext und wird gelesen. Entscheidend ist also allein die Lesbarkeit.
Vertikal ist der Normalfall, horizontal die Ausnahme
Beim vertikalen Accordion liegen die Leisten untereinander und der Inhalt klappt nach unten auf. Diese Form braucht nur Höhe und funktioniert auf jeder Bildschirmbreite, weshalb sie der Standard für Fragenlisten ist.
Das horizontale Accordion stellt die Titel als schmale Spalten nebeneinander; beim Öffnen verbreitert sich eine Spalte und gibt ihren Inhalt frei. Die Titel stehen dann senkrecht und sind schlechter zu lesen, und die Form braucht Breite. Auf einem Telefon ist sie deshalb kaum brauchbar und muss auf die vertikale Form zurückfallen. Wir setzen sie nur dort ein, wo wenige Themen mit viel Bildmaterial nebeneinander gezeigt werden sollen.
Das Markup entscheidet über die Bedienbarkeit
Die Überschrift eines Accordions gehört in ein button-Element. Nur dann lässt sie sich mit der Tastatur erreichen und mit Leertaste oder Enter auslösen. Dazu gehört das Attribut aria-expanded, das den Zustand trägt und beim Umschalten mitgeschrieben wird, sowie aria-controls als Verweis auf den Inhaltsbereich.
Die Tastaturanforderungen beschreibt das ARIA Authoring Practices Guide im Muster Accordion. In HTML gibt es dafür auch die Elemente details und summary, die das Verhalten ohne JavaScript mitbringen. Sie sind der schnellste Weg zu einem funktionierenden Accordion. Gestalterisch sind sie etwas sperriger, weil das Dreieck und das Öffnungsverhalten vom Browser kommen.
Was Besucher daran stört
Zwei Punkte fallen im Alltag auf. Wenn sich beim Öffnen eines Abschnitts alle anderen schließen, verliert man den Vergleich zwischen zwei Antworten. Wir lassen deshalb mehrere Abschnitte gleichzeitig offen, solange es keinen Grund für das Gegenteil gibt. Und wenn ein geöffneter Abschnitt den Rest der Seite nach unten schiebt, wandert die angeklickte Überschrift aus dem Blick. Dagegen hilft, die Position der Überschrift beim Öffnen zu halten.