Barrierefreies Akkordeon 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 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. Durch Klick oder Tastenbefehl erscheinen Inhalte unterhalb der Überschrift, die zuvor nicht sichtbar waren – ähnlich wie bei einem echten Akkordeon. Im Webdesign sind Akkordeons ideal, um Platz zu sparen und die Übersichtlichkeit zu erhöhen. Nutzer können sich schnell die für sie wichtigen Themen aussuchen und bewusst zusätzliche Informationen dazu erhalten.

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 Akkordeons also nur dann eingesetzt werden, wenn es sowohl für Nutzer als auch Suchmaschinen ok wäre, wenn die Texte 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 Akkordeons 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?
• Kann die Aktion auch mit der Tastatur ausgelöst werden?
• Wird auch Nutzern von Screenreadern deutlich gemacht, ob der Inhalt aktuell ausgeklappt ist oder nicht?

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 Akkordeon gestalten. Es arbeitet gut mit Screenreadern und Tastaturbedienung zusammen, ohne zusätzlichen Aufwand.

<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>

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 geöffnet ist.

Um das Element der Gestaltung der Seite anzupassen kann es einfach mit CSS verändert werden.

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. 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. Um die Funktionalität muss man sich dann selbst mit JavaScript kümmern. Das kann im HTML 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>

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 Akkordeons 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 umgesetzt und angepasst. Mit den richtigen Tools und einem klaren Verständnis der Bedürfnisse aller Nutzer*innen können Sie ein inklusives Web-Erlebnis schaffen, das weder für Suchmaschinen noch für Menschen eine Sackgasse ist.