SSA – Einheitlicher Standard für Akkordeons

258

19/01/26

2 min.

Definitionen

Der SSA-Standard legt Anforderungen an die Semantik, Barrierefreiheit und Funktionslogik von Akkordeons fest.

Akkordeon-Elemente in diesem Standard werden Spoiler genannt. Spoiler können unabhängige Entitäten vom Akkordeon sein, werden aber selten einzeln verwendet.

Struktur und Semantik

Die Grundlage des Akkordeons bildet die Liste <ul>. Dadurch wird sichergestellt, dass assistive Technologien die Spoiler-Gruppe als eine einheitliche Auflistung miteinander verbundener Elemente wahrnehmen. Innerhalb jedes <li> befindet sich das Tag <details>, das zwingend die Überschrift <summary> und den Inhaltsbereich <div> enthält:

<ul class="accordion">
  <li>
    <details class="spoiler" name="faq">
      <summary class="spoiler__trigger">
        <h3 class="spoiler__title">Trigger-Text</h3>
        <span class="spoiler__icon" aria-hidden="true"></span>
      </summary>
      <div class="spoiler__content"></div>
    </details>
  </li>
</ul>

Das Attribut name ermöglicht es Ihnen, Akkordeons zu erstellen, bei denen gleichzeitig nur ein Spoiler geöffnet sein kann (vorausgesetzt, alle Elemente in der Gruppe haben denselben name-Wert).

Barrierefreiheit

Der Status „erweitert/verkleinert“ wird dank der Verwendung des nativen Tags <details> automatisch an Screenreader weitergeleitet, zusätzliche ARIA-Attribute sind hierfür nicht erforderlich. Dem Symbol (Pfeil oder Pluszeichen) wird immer aria-hidden="true" hinzugefügt, da es eine visuelle Funktion erfüllt und seine Sprachausgabe für den Nutzer unnötigen „Lärm“ verursachen würde.

Dank <summary> erhält das Element beim Drücken der Tab-Taste automatisch den Fokus und wird mit den Tasten Enter oder Leertaste aktiviert. Außerdem ist die Verwendung der Pseudoklasse :focus-visible zwingend erforderlich, damit der Benutzer bei der Navigation mit der Tastatur einen deutlichen outline-Rahmen des aktiven Elements sieht.

Der Text innerhalb des Triggers muss in eine Überschrift (<h3>-<h6>) eingeschlossen werden, die der Struktur der Seite entspricht, damit Nutzer von Screenreadern schnell durch die Abschnitte des Akkordeons navigieren können.

Interaktivität und Visuelle Rückmeldung

Der Bereich, in dem der Trigger <summary> angeklickt werden kann, sollte so groß wie möglich sein und über separate innere Abstände verfügen; dies ist besonders bei mobilen Geräten entscheidend. Auch der Inhalt sollte separate innere Abstände aufweisen, um die Fläche des aktiven Bereichs zu vergrößern, ohne den Text „ zusammenzudrücken“, und damit der Nutzer den Status des Elements verstehen kann, sollten stets drei Interaktionsarten verwendet werden: Mauszeiger-Überfahrt, Fokus und Öffnen.

/* Basisstile */
.spoiler__trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none; /* Systemmarkierung verbergen */
}

.spoiler__trigger::-webkit-details-marker {
  display: none;
}

.spoiler__trigger:hover {
  background-color: rgb(0 0 0 / 5%);
}

/* Zustand bei Öffnung */
.spoiler[open] .spoiler__trigger {
  background-color: #f8f9fa;
  border-block-end: 1px solid #eee;
}

/* Symbolanimation */
.spoiler__icon {
  flex-shrink: 0;
  inline-size: 24px;
  block-size: 24px;
  transition: rotate 0.3s ease-in-out;
}

.spoiler[open] .spoiler__icon {
  rotate: 180deg;
}