Barrierefreies Akkordeon nur mit HTML auf Ihrer Website

Jede Website lebt von emotionalen Bildern und informativen Texten. Doch nicht immer möchte man diese Texte direkt sichtbar präsentieren. Gerade Seiten mit besonders vielen Informationen wie FAQ oder Glossare sollten dem Nutzer die Möglichkeit bieten, schnell seine Frage oder sein gewünschtes Thema zu finden und dann nur diese Antwort lesen zu können. Ein perfekter Einsatzweck für ein sogenanntes Akkordeon (auch Klappmenü, ausklappbare Liste oder auf englisch accordion genannt) auf Ihrer Website. Doch wie lassen sich diese Akkordeons mit HTML barrierefrei umsetzen und wo liegen überhaupt die Barrieren? Das schauen wir uns diese Woche genauer an.

Was ist ein Akkordeon auf einer Website eigentlich?

Ein Akkordeon ist ein effektives Werkzeug zur Strukturierung von Inhalten. dabei erscheinen durch Klick oder Tastenbefehl Inhalte unterhalb der Überschrift, die zuvor nicht sichtbar waren – ähnlich wie bei einem echten Akkordeon klappen sich Bereiche also auf und zu. Im Webdesign sind sie ideal, um Platz zu sparen und die Übersichtlichkeit zu erhöhen. Meist werden gleich mehrere solcher Bereiche kombiniert. So können Nutzer sich schnell die für sie wichtigen Themen aussuchen und bewusst zusätzliche Informationen dazu erhalten. Ein kleines Dreieck, ein Pfeil oder ein Pluszeichen neben der Überschrift zeigen, dass es hier mehr zu sehen gibt.

Beachten Sie aber, dass Akkordeons womöglich schädlich für Ihre Suchmaschinenoptimierung sein könnten. Bis heute ist nicht ganz klar, ob und wie weit Google ausgeblendete Texte überhaupt indiziert oder zumindest geringer bewertet.

Grundsätzlich sollten ausklappbare Elemente also nur dann eingesetzt werden, wenn es sowohl für Nutzer als auch Suchmaschinen ok wäre, wenn die Abschnitte nie gelesen werden.

Problemkind Akkordeon?

Die im Akkordeon versteckten Texte nicht lesen zu wollen ist jedoch das geringste Problem. Für Nutzer mit Beeinträchtigungen können schlecht umgesetzte Klappmenü dafür sorgen, dass die Inhalte überhaupt nicht gelesen werden können. Dabei sollte man sich bei der Umsetzung ein paar ganz wichtige Fragen stellen:

• Ist für sehende und nicht sehende Nutzer sofort klar, dass man hier Inhalt aufklappen kann? Ein eindeutiger Marker ist hier Pflicht, zusätzliche Rahmen können außerdem helfen, sie von normalen Überschriften zu unterscheiden.
• Kann die Aktion auch mit der Tastatur ausgelöst werden? Auch Nutzer ohne Maus müssen Ihre Inhalte auf- und zuklappen können. Testen Sie das am Besten selbst. Navigieren Sie über die Tabulator-Taste und versuchen Sie, die Inhalte mit der Enter-Taste zu öffnen.
• Wird auch Nutzern von Screenreadern deutlich gemacht, ob der Inhalt aktuell ausgeklappt ist oder nicht? Hier müssen Sie eventuell passende ARIA-Attribute eingesetzen.

Umsetzung mit dem details-Element: das HTML-Akkordeon

HTML5 brachte uns das <details>-Element, das eine einfache Implementierung von Akkordeons
ermöglicht. Mit dem <summary>-Element als „Überschrift“ lässt sich nativ ein barrierefreies Inhaltselement gestalten. Es arbeitet gut mit Screenreadern und Tastaturbedienung zusammen, ohne zusätzlichen Aufwand. Sie benötigen also kein zusätzliches JavaScript und CSS nur, wenn Sie etwas am Aussehen ändern wollen. Die Ausklappbaren Inhalte, Tastaturbedienbarkeit und die Kompatibilität zu Screenreadern sind alle schon in den Browsern umgesetzt.

<details name="accessibility-info" open>
  <summary>Barrierefreiheit</summary>
  <p>Barrierefreiheit bedeutet …</p>
</details>

<details name="accessibility-info">
  <summary>Inklusion</summary>
  <p>Inklusion beschreibt …</p>
</details>

<details name="accessibility-info">
  <summary>Ableismus</summary>
  <p>Ableismus bezeichnet …</p>
</details>

Der HTML-code zeigt: Es braucht nur wenige Elemente, damit das Akkordeon funktioniert. Klicken Nutzer auf die summary, werden alle weiteren Inhalte angezeigt. Mithilfe eines gemeinsamen name-Attributs lässt sich dafür sorgen, dass innerhalb der Gruppe an Elementen nur ein Eintrag geöffnet sein kann. Wird ein weiteres Element geöffnet, dann schließt sich das erste. Lässt man diesen Namen weg, dann können die Elemente beliebig geöffnet und geschlossen werden. Das Attribut open zeigt an, welches Element gerade geöffnet ist.

Um das Element der Gestaltung der Seite anzupassen kann es einfach mit CSS verändert werden. Fügen wir doch einmal eigene Farben und ein eigenes Symbol hinzu.

Ein Akkordeon selbst bauen mit Überschriften und Buttons

Ist mehr Gestaltungsspielraum bei der Umsetzung eines Akkordeons gewünscht, dann bietet es sich manchmal an, dieses mit anderen HTML-Elementen nachzubauen und den Akkordeon-Effekt mit JavaScript und CSS hinzuzufügen. Wichtig ist dabei, die semantische Struktur der Texte zu erhalten. Das heißt, dass jeder Eintrag über eine entsprechende Überschrift verfügt. Das Öffnen und Schließen der Inhalte wird über Buttons ausgelöst (schließlich lösen Sie eine Aktion aus). Um die tatsächliche Funktionalität muss man sich dann selbst mit JavaScript kümmern. Im HTML kann das dann beispielsweise so aussehen:

<section>
  <h4><button aria-expanded="false" aria-controls="definition1">Barrierefreiheit</button></h4>
  <div id="definition1" hidden>
    <p>Barrierefreiheit bedeutet …</p>
  </div>
</section>

<section>
  <h4><button aria-expanded="false" aria-controls="definition2">Inklusion</button></h4>
  <div id="definition2" hidden>
    <p>Inklusion beschreibt …</p>
  </div>
</section>

<section>
  <h4><button aria-expanded="false" aria-controls="definition3">Ableismus</button></h4>
  <div id="definition3" hidden>
    <p>Ableismus bezeichnet …</p>
  </div>
</section>

<script>
  document.querySelectorAll('button').forEach(button => {
    button.addEventListener('click', () => {
      const expanded = button.getAttribute('aria-expanded') === 'true' || false;
      button.setAttribute('aria-expanded', !expanded);
      const content = document.getElementById(button.getAttribute('aria-controls'));
      content.hidden = expanded;
    });
  });
</script>

Sie sehen: der Code wird deutlich komplizierter. Und je komplizierter der Code ist, desto eher schleichen sich Fehler ein. Bevor Sie ein Inhaltselement, das HTML bereits hat, also nachbauen, schauen Sie doch einfach, ob Sie mit dem Standard nicht schon alle Anforderungen erfüllen.

Mehr zum Thema:

• Button oder Link – wann verwende ich was?
• Gliederung von Texten – großer Text macht noch keine Überschrift

Gibt es Standards für die Tastaturbedienung?

Ja, die gibt es. Die Web Accessibility Initiative (WAI) stellt mit den ARIA (Accessible Rich Internet Applications) Standards klare Richtlinien zur Verfügung, wie interaktive Webinhalte zugänglich gemacht werden können. Für ausklappbare Inhalte bedeutet das: Sie sollten mit der Tab-Taste erreichbar und mit der Enter- oder Leertaste aktivierbar sein. Außerdem gibt es, wie im obigen Beispiel zu sehen einige ARIA-Attribute, die Screenreader beim Verständnis unterstützen.

• aria-controls Verknüpft einen Button mit dem Element, das dieser Button steuert.
• aria-expanded Zeigt an, ob ein Bereich ausgeklappt ist oder nicht

Mehr zum Thema:

• Web Pattern für Akkordeons des W3C (auf Englisch)
• ARIA Rollen und Attribute – was sie bringen und was nicht

Fazit – Ein Akkordeon barrierefrei einzusetzen ist kein Hexenwerk

Ein barrierefreies Akkordeon auf Ihrer Website bereitzustellen, ist weniger komplex als gedacht. Dank des details-Elementes ist es mit wenig Aufwand und nur mit HTML umgesetzt und angepasst.  Das details-Element ermöglicht es, Inhalte einfach ein- und auszuklappen. Für Sie bedeutet das: einfacher, gut wartbarer Code. Für Ihre Nutzer ist es eine barrierefreie und robuste Variante, genau für Sie relevante Inhalte einzublenden. Eine Win-Win-Situation. Verbessern Sie die Barrierefreiheit Ihrer Website und blenden Sie weitere Informationen zu Ihren produkten doch zukünftig mit dem HTML-Element details ein.