SSB - Einheitlicher Standard für Schaltflächen

Definitionen

Der SSB-Standard legt Anforderungen an die Semantik, Barrierefreiheit und Funktionslogik von Schaltflächen fest.

Struktur und Semantik

Zweck und Button-Typ

• Für Aktionen wird das native Element <button> verwendet. <div> und <span> mit Event-Handlern erhalten nicht automatisch die Semantik oder Tastaturbedienung eines Buttons.
• Das Attribut type wird für jeden Button explizit angegeben. Sein Wert richtet sich nach der beabsichtigten Aktion, nicht nur nach der Position des Buttons:
  • type="submit" sendet das zugehörige Formular ab;
  • type="button" führt eine Oberflächenaktion aus, ohne ein Formular abzusenden oder zurückzusetzen;
  • type="reset" setzt die Formularelemente auf ihre Ausgangswerte zurück.
• Fehlt type, kann das Formular abgesendet werden: Das Standardverhalten hängt vom Kontext und der Formularzugehörigkeit des Buttons ab. Über das Attribut form kann ein Button auch außerhalb des <form>-Elements einem Formular zugeordnet werden.
• type="reset" wird nur verwendet, wenn das Zurücksetzen auf die Ausgangswerte die erwartete Aktion ist. Ein Formular-Reset leert die Felder nicht unbedingt, sondern stellt für jedes Steuerelement den Standardwert wieder her.

Gruppierung von Buttons

• Zusammengehörige Buttons werden semantisch gruppiert. Für eine gewöhnliche Gruppe wird role="group" mit einem zugänglichen Namen verwendet; für zusammengehörige Formularfelder eignen sich <fieldset> und <legend>.
• role="toolbar" kennzeichnet eine tatsächliche Werkzeugleiste und ist kein allgemeiner Ersatz für eine Gruppe. Eine Werkzeugleiste ermöglicht die Tastaturnavigation zwischen Steuerelementen mit den Pfeiltasten und verwaltet den Fokus entsprechend.
• Bei einem Umschalt-Button mit gleichbleibender Beschriftung wird der Zustand mit aria-pressed="true" oder aria-pressed="false" ausgegeben. Ändert sich die Beschriftung, zum Beispiel von „Wiedergabe“ zu „Pause“, wird aria-pressed üblicherweise nicht ergänzt.

Barrierefreiheit

Zugänglicher Name und Tastatur

• Der Button-Text bildet üblicherweise den zugänglichen Namen. Ein Button, der nur ein Symbol enthält, erhält über aria-label oder aria-labelledby einen aussagekräftigen Namen.
• Ein Symbol, das eine bereits verständliche Textbeschriftung ergänzt, wird als dekorativ gekennzeichnet, zum Beispiel mit aria-hidden="true". Ein redundanter Name über aria-label wird nicht ohne Bedarf ergänzt.
• Ein nativer Button wird mit Enter und der Leertaste aktiviert. Eigene Event-Handler dürfen weder die native Tastaturbedienung beeinträchtigen noch dieselbe Aktion doppelt auslösen.
• Nach einer gewöhnlichen Aktion bleibt der Fokus auf dem Button. Öffnet eine Aktion einen Dialog oder wechselt den Kontext, richtet sich die Fokusbewegung nach den Anforderungen des neuen Kontexts.

Fokus und Zustände

• Der Fokusindikator wird nicht ohne einen gleichwertigen sichtbaren Ersatz entfernt. Für die Gestaltung des Tastaturfokus wird :focus-visible verwendet; Kontrast und Sichtbarkeit werden auf allen verwendeten Hintergründen geprüft.
• Die Zustände :hover, :active, :focus-visible und :disabled müssen, sofern anwendbar, visuell unterscheidbar sein. Hover darf nicht der einzige Hinweis auf eine Aktion sein: Bei Touch-Eingaben steht er nicht zur Verfügung und ersetzt weder Fokus- noch Aktivierungszustände.
• Für einen nicht verfügbaren Button wird das native Attribut disabled verwendet. Anders als aria-disabled="true" verhindert es die Aktivierung und nimmt den Button aus der regulären Fokusreihenfolge.
• aria-disabled="true" wird nur verwendet, wenn ein nicht verfügbarer Button in der Fokusreihenfolge bleiben muss. In diesem Fall müssen die Aktion und ihr Event-Handler separat blockiert werden.

Asynchrone Aktionen

• Eine erneute Ausführung einer asynchronen Aktion wird verhindert, wenn sie zu einer doppelten Operation führen könnte. Während der Ausführung kann der Button vorübergehend disabled sein.
• aria-busy="true" kennzeichnet, dass das betreffende Element aktualisiert wird, garantiert aber nicht, dass ein Ladetext vorgelesen wird. Der Status wird separat ausgegeben, zum Beispiel mit einem Element mit role="status".
• Nach Abschluss der Operation wird aria-busy zurückgesetzt, der Button in seinen aktuellen Zustand versetzt und das Ergebnis oder der Fehler zugänglich gemacht.

Interaktion und visuelle Gestaltung

Cursor und Rückmeldung

• In Projekten, in denen der Cursor eine Aktion signalisiert, wird für bedienbare Buttons cursor: pointer und für deaktivierte Buttons cursor: not-allowed gesetzt. Der Cursor ist nur ein visueller Hinweis und ersetzt weder die Button-Semantik noch dessen Zustände.
• Für den gedrückten Zustand kann eine dezente visuelle Rückmeldung eingesetzt werden, etwa eine Verschiebung des Buttons um 1px. Der Effekt darf Text, Fokus oder andere Zustände nicht beeinträchtigen.
• Übergangsanimationen werden bei aktivierter Einstellung prefers-reduced-motion: reduce verkürzt oder deaktiviert, sofern die Bewegung nicht zum Verständnis einer Zustandsänderung erforderlich ist.

Größe der Zielfläche

• Die Größe der interaktiven Zielfläche wird auf Touch-Geräten geprüft. Für die Konformität mit WCAG 2.2 SC 2.5.8 muss sie mindestens 24 × 24 CSS-px groß sein oder eine Ausnahme des Erfolgskriteriums erfüllen, zum Beispiel ausreichenden Abstand zu benachbarten Zielen.
• Das sichtbare Symbol darf kleiner als die Klickfläche sein; der Button oder sein Container muss trotzdem eine ausreichend große Zielfläche bereitstellen.

Prüfung

• Für jeden Button ist ein passendes type explizit angegeben. Das Verhalten von Buttons innerhalb eines Formulars und von Buttons, die über das Attribut form zugeordnet sind, wird geprüft.
• Buttons funktionieren mit Tastatur, Zeiger und Touch-Eingabe; eine gewöhnliche Aktivierung verschiebt den Fokus nicht unerwartet.
• Namen und Zustände der Buttons sind bei der Prüfung mit einem Screenreader verständlich. Buttons, die nur Symbole enthalten, haben einen zugänglichen Namen.
• Die Zustände :hover, :active, :focus-visible, disabled und der Ladezustand sind visuell unterscheidbar und hängen nicht allein von Farbe oder Cursor ab.
• Erneute Aktivierung während einer asynchronen Aktion, Statusmeldungen sowie die Zugänglichkeit von Ergebnis- und Fehlermeldungen werden geprüft.
• Gruppen verwenden eine passende Semantik. Bei role="toolbar" werden zusätzlich Pfeiltastennavigation, Fokusverwaltung und das Verhalten der Tab-Taste geprüft.
• Die Größe der Zielfläche wird anhand von WCAG 2.2 SC 2.5.8 einschließlich möglicher Ausnahmen geprüft.

Beispiele

Buttons mit explizitem Typ:

<form action="/subscribe" method="post">
  <button type="submit">Abonnieren</button>
  <button type="reset">Ausgangswerte wiederherstellen</button>
</form>

<button type="button">Einstellungen öffnen</button>

Icon-Button und Button-Gruppe:

<button type="button" aria-label="Löschen">
  <svg aria-hidden="true" viewBox="0 0 24 24">...</svg>
</button>

<div role="group" aria-label="Formatierung">
  <button type="button" aria-pressed="false">Fett</button>
  <button type="button" aria-pressed="false">Kursiv</button>
  <button type="button" aria-pressed="false">Unterstrichen</button>
</div>

Button-Zustände und Tastaturfokus:

button:enabled {
  cursor: pointer;
  transition: transform 120ms ease;
}

button:disabled {
  cursor: not-allowed;
}

button:hover:enabled {
  background-color: #e0e0e0;
}

button:active:enabled {
  background-color: #d0d0d0;
  transform: translateY(1px);
}

button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  button {
    transition: none;
  }
}

Farbe des Fokusindikators und Hintergrund werden unter Berücksichtigung des Kontrasts in der Oberfläche gewählt. Die Anzeige von :focus-visible richtet sich nach Browserheuristiken und kann auch aus anderen Gründen als der Tastatureingabe erfolgen.

Asynchrone Aktion mit separater Statusmeldung:

<div aria-busy="true">
  <button type="submit" disabled>Wird gespeichert...</button>
</div>

<p role="status">Änderungen werden gespeichert</p>

aria-busy kennzeichnet den aktualisierten Bereich, während role="status" die Statusänderung ohne Fokusverschiebung mitteilt. Nach Abschluss der Operation ist der Bereich nicht mehr beschäftigt, der Button wird aktualisiert und der Status gibt das Ergebnis aus.