SSA – Einheitlicher Standard für Akkordeons

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

Akkordeonelemente werden in diesem Standard als Spoiler bezeichnet. Spoiler können vom Akkordeon getrennte Elemente sein, werden jedoch selten separat verwendet.

Struktur und Semantik

Die Grundlage bildet die Liste <ul>. Dadurch wird sichergestellt, dass Screenreader und Suchroboter die Gruppe von Spoilern als eine einzige Liste miteinander verbundener Elemente wahrnehmen.

Jeder Spoiler enthält <details>, in dem die Reihenfolge streng festgelegt ist:

1. Trigger-Überschrift;
2. Inhalt mit Daten.

<ul class="ssa-accordion">
  <li class="ssa-spoiler">
    <details class="ssa-spoiler__details" name="faq">
      <summary class="ssa-spoiler__summary">
        <h3 class="ssa-spoiler__title">Текст триггера</h3>
        <span class="ssa-spoiler__icon" aria-hidden="true"></span>
      </summary>
      <div class="ssa-spoiler__content">
      </div>
    </details>
  </li>
</ul>

Mit dem Attribut name können Sie Akkordeons erstellen, in denen nur ein Spoiler geöffnet werden kann, vorausgesetzt, dass alle Spoiler denselben Wert in name haben.

Interaktivität

Der Trigger ist das gesamte Element <summary>. Sein Klickbereich sollte so groß wie möglich sein, um die Bedienung auf Mobilgeräten zu erleichtern.

• Der Trigger und der Inhalt müssen separate Abstände haben, damit der Trigger mehr Fläche zum Klicken hat.
• Wenn ein Symbol vorhanden ist, sollte es ein visueller Indikator sein. Wenn es kein Symbol gibt, ist eine alternative visuelle Rückmeldung erforderlich.

.ssa-spoiler__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
}

/* Ausblenden der Systemmarkierung */
.ssa-spoiler__summary::-webkit-details-marker { display: none; }

.ssa-spoiler__icon {
  flex-shrink: 0;
  inline-size: 24px;
  block-size: 24px;
  transition: rotate 0.3s ease-in-out;
  /* Hier kann background-image oder SVG stehen. */
}

.ssa-spoiler__details[open] .ssa-spoiler__icon {
  rotate: 180deg;
}

Für das Symbol wird immer aria-hidden="true" hinzugefügt, da es eine dekorative Funktion hat und der Status "offen/geschlossen" von Screenreadern direkt aus dem Tag <details> gelesen wird.

Visuelle Rückmeldung

Der Benutzer muss sofort erkennen können, dass ein Element aktiv oder ausgewählt ist.

Der SSA-Standard sieht drei Arten von Rückmeldungen vor:

• Hover – leichte Änderung des Hintergrunds von <summary> beim Darüberfahren mit der Maus.
• Focus – deutlicher Rahmen bei der Navigation mit der Tastatur über :focus-visible.
• Open – wenn kein Symbol vorhanden ist, wird eine Akzentlinie oder eine andere Hintergrundfarbe für den geöffneten Spoiler verwendet.

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

.ssa-spoiler__details[open] .ssa-spoiler__summary {
  background-color: #f8f9fa;
  border-block-end: 1px solid #eee;
}