SSA – Einheitlicher Standard für Akkordeons

Der SSA-Standard definiert Anforderungen für die Semantik, Barrierefreiheit und Logik von Akkordeon-Funktionalität.

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 Markup

Die Grundlage eines Akkordeons ist eine <ul>-Liste. Dies stellt sicher, dass unterstützende Technologien eine Gruppe von Spoilern als eine einzelne Liste verwandter Elemente wahrnehmen.

Innerhalb jedes Listenelements <li> befindet sich ein <details>-Tag, das streng folgende Elemente enthält:

1. Ein Header-Trigger <summary>;
2. Ein Inhaltsbereich <div>.

<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">Trigger-Text</h3>
        <span class="ssa-spoiler__icon" aria-hidden="true"></span>
      </summary>
      <div class="ssa-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

1. Zustandssemantik - Der Zustand "erweitert/zusammengeklappt" wird Screenreadern dank der Verwendung des nativen <details>-Tags automatisch vermittelt. Keine zusätzlichen ARIA-Attribute sind erforderlich.

2. Ausblenden von dekorativen Elementen - Das Symbol (Pfeil) wird immer mit aria-hidden="true" versehen. Es erfüllt eine visuelle Funktion, und das Vorlesen würde für den Benutzer nur unnötigen "Lärm" erzeugen.

3. Tastaturnavigation - Dank <summary> erhält das Element automatisch den Fokus, wenn die Tabulatortaste gedrückt wird, und wird mit Enter- oder Leertasten aktiviert.

4. Visueller Fokus - Die Pseudoklasse :focus-visible muss verwendet werden. Bei der Navigation mithilfe der Tastatur sollten Benutzer eine klare Kontur des aktiven Elements sehen.

5. Überschriftenhierarchie - Der Text im Trigger sollte in einer Überschrift (<h3>–<h6>) eingeschlossen sein, die der Seitenstruktur entspricht, damit Benutzer von Screenreadern schnell durch Akkordeonsektionen navigieren können.

Interaktivität und Styling

1. Der Klickbereich des <summary>-Triggers sollte so groß wie möglich sein. Dies ist für Mobilgeräte kritisch.

2. Der Trigger und der Inhalt sollten mit separaten inneren Abständen versehen werden. Dies vergrößert den aktiven Bereich, ohne den Text zu "verengen".

Benutzer sollten den Zustand eines Elements sofort durch drei Arten von Reaktionen verstehen:

1. Hover - Eine subtile Hintergrundänderung beim Hovern;
2. Fokus - Ein Akzentrahmen;
3. Offen - Eine Hintergrundfarbenänderung oder das Erscheinen einer Trennlinie beim offenen Spoiler.

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

.ssa-spoiler__summary::-webkit-details-marker {
  display: none;
}

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

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

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

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

Der Artikel wird ergänzt werden