Wozu Akkordeon-Effekte auf Webseiten gut sind
Akkordeons beziehungsweise Akkordeon-Effekte werden aus User Experience- und Usability-Gründen gern zur Gliederung von umfangreichen Inhalten in logische Einzelbereiche genutzt. Mit Ihnen ist es möglich, Informationen platzsparend darzustellen, sodass für den Besucher weniger Ablenkung durch andere Inhalte entsteht. Dazu werden die Informationen hinter einer Schaltfläche versteckt, bis sich der Nutzer dazu entscheidet, diese lesen zu wollen.
Was ist ein Akkordeon und wie funktioniert es?
Der Name Akkordeon weist schon darauf hin, dass man etwas aufzieht beziehungsweise aufklappt. Im Grunde ist es eine Liste, bei der jeder Eintrag in der Regel über einen Titel und eine Beschreibung verfügt. Die Beschreibung wird solange versteckt, bis der Nutzer auf den jeweiligen Titel klickt. Die Beschreibungen der anderen Einträge werden in der Regel versteckt. Für ein besseres Nutzungserlebnis empfiehlt es sich, bei dem Akkordeon-Element die Möglichkeit anzubieten, als Nutzer auch mehrere Einträge parallel öffnen zu können.
Wo werden Akkordeons hauptsächlich eingesetzt?
Akkordeons findet man oft auf FAQ-Seiten, also Seiten zur Klärung von häufig gestellten Fragen (beispielsweise zum Versand oder den Zahlungsarten), und auf Produktdetailseiten von Onlineshops. Sie machen es dem Besucher einfach, die Titel zu überfliegen, ohne durch die jeweiligen Informationen beziehungsweise Antworten abgelenkt zu werden.
Was sind Vorteile von Akkordeons?
Ein großer Vorteil besteht darin, dass man Informationen platzsparend darstellen kann und diese gut gegliedert sind. Dadurch entsteht keine Ablenkung durch andere Inhalte und die Aufmerksamkeit wird erhöht. Außerdem funktioniert ein Akkordeon in allen Auflösungen, speziell auch auf kleineren Bildschirmen, gut.
Welche Nachteile haben Akkordeons?
Neben den zahlreichen Vorteilen gibt es aber auch grundsätzliche Nachteile: beispielsweise ist eine Nutzeraktivität erforderlich, um die Inhalte einzublenden. Wenn der Nutzer diese aus irgendeinem Grund nicht ausführt, zum Beispiel, weil er das Prinzip nicht versteht oder der Titel keinen ausreichenden Klickanreiz bietet, bleibt der Inhalt im Verborgenen.
Da Seiten mit Akkordeon-Effekten und dadurch meist auch mit sehr vielen Inhalten eine geringe Keyword-Dichte aufweisen, kann sich dies negativ auf das Ranking der jeweiligen Seite in den Suchmaschinen auswirken, da sie unter Umständen nicht als spezifische Quelle zu einem bestimmten Thema eingestuft werden.
Ein weiteres Problem bei der Suchmaschinenoptimierung solcher Seiten könnte sein, das bis heute nicht ganz klar ist, ob und in wie weit Suchmaschinen wie Google ausgeblendete Inhalte überhaupt indexieren oder geringer bewerten.
Wenn ein Besucher den meisten Inhalt sowieso sehen muss oder sollte, macht es deshalb Sinn, diesen nicht in einem Akkordeon darzustellen. Grundsätzlich sollte man sie also nur dort einsetzen, wo es sowohl für den Nutzer als auch die Suchmaschine okay wäre, wenn der Text nie gelesen wird.
Wie lassen sich Akkordeons umsetzen und worauf ist dabei zu achten?
Bei der Umsetzung von Akkordeons gilt es sicherzustellen, dass diese barrierefrei implementiert werden und mittels Tastatur zugänglich für Screenreader sind. Ebenso sollte klar erkennbar sein, dass der Inhalt aufgeklappt werden kann, beispielsweise durch entsprechende Icons. Wenn der Inhalt dann aufgeklappt wurde, sollte dies auch Nutzern von Screenreadern kenntlich gemacht werden.
Folgende ARIA-Attribute (die Abkürzung steht für "Accessible Rich Internet Applications") sind wichtig:
- aria-expanded: dieses Attribut sagt aus, ob die Beschreibung des Eintrags zu- (false) oder aufgeklappt (true) ist
- aria-controls: dieses Attribut verknüpft eine Schaltfläche mit einem Eintrag (über dessen id-Attribut), den die Schaltfläche steuert
- aria-labelledby: dieses Attribut verweist auf ein Element (über dessen id-Attribut), das eine zugängliche Beschriftung für den Eintrag liefert
In Shopware 6 kann man ein Akkordeon beispielsweise über den CMS-Block "HTML" aus der Block-Kategorie "HTML" mit folgendem HTML-Code und unter Zuhilfenahme von Bootstrap umsetzen:
<div class="accordion" id="accordionQuestions">
<div class="accordion-item">
<h2 class="accordion-header" id="headingQuestionOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseQuestionOne" aria-expanded="false" aria-controls="collapseQuestionOne">
Dies ist Frage 1
</button>
</h2>
<div id="collapseQuestionOne" class="accordion-collapse collapse" aria-labelledby="headingQuestionOne" data-bs-parent="#accordionQuestions">
<div class="accordion-body">
Das ist die Antwort von Frage 1.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingQuestionTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseQuestionTwo" aria-expanded="false" aria-controls="collapseQuestionTwo">
Dies ist Frage 2
</button>
</h2>
<div id="collapseQuestionTwo" class="accordion-collapse collapse" aria-labelledby="headingQuestionTwo" data-bs-parent="#accordionQuestions">
<div class="accordion-body">
Das ist die Antwort von Frage 2.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingQuestionThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseQuestionThree" aria-expanded="false" aria-controls="collapseQuestionThree">
Dies ist Frage 3
</button>
</h2>
<div id="collapseQuestionThree" class="accordion-collapse collapse" aria-labelledby="headingQuestionThree" data-bs-parent="#accordionQuestions">
<div class="accordion-body">
Das ist die Antwort von Frage 3.
</div>
</div>
</div>
</div>
Soll es möglich sein, dass der Nutzer mehrere Einträge parallel öffnen kann, muss dazu nur das Bootstrap-Attribut data-bs-parent weggelassen werden. Insofern die Beschreibung des ersten Eintrags bereits beim Laden der Seite geöffnet sein soll, muss man den zuvor dargestellten HTML-Code folgendermaßen anpassen:
<div class="accordion" id="accordionQuestions">
<div class="accordion-item">
<h2 class="accordion-header" id="headingQuestionOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseQuestionOne" aria-expanded="true" aria-controls="collapseQuestionOne">
Dies ist Frage 1
</button>
</h2>
<div id="collapseQuestionOne" class="accordion-collapse collapse show" aria-labelledby="headingQuestionOne" data-bs-parent="#accordionQuestions">
<div class="accordion-body">
Das ist die Antwort von Frage 1.
</div>
</div>
</div>
...
</div>
Im zu- und aufgeklappten Zustand sieht dies dann wie folgt aus:
