Standards · ARIA

Rolle Widget

button

Kennzeichnet ein Element als Schaltfläche — ein Steuerelement, das bei Aktivierung eine Aktion auslöst. Bevorzugt sollte das native HTML-Element <button> verwendet werden; role="button" auf einem <div> oder <span> kommt nur in Betracht, wenn das native Element nicht einsetzbar ist.

Verwendung

In fast allen Fällen sollte das native <button>-Element verwendet werden. Es übernimmt kostenlos: Fokussierbarkeit, Aktivierung per Leertaste und Enter-Taste, den deaktivierten Zustand sowie die Semantik zum Absenden von Formularen. Wer role="button" auf einem <div> einsetzt, muss all das selbst nachbilden — und die meisten Autorinnen und Autoren tun das nicht vollständig.

Die legitimen Einsatzfälle für role="button" sind eng begrenzt:

  • Einschränkungen durch ein Drittanbieter-Designsystem, das Nicht-Button-Komponenten liefert.
  • Authoring in einer Umgebung, in der <button> nicht verfügbar ist (einige Legacy-CMS-Templates).
  • Kurzfristige Barrierefreiheits-Nachrüstung eines <div>, während ein Refactoring geplant wird.

Wird role="button" eingesetzt, müssen zusätzlich folgende Maßnahmen ergriffen werden:

  • Das Element mit tabindex="0" fokussierbar machen.
  • keydown-Ereignisse für Enter und Space verdrahten (mit event.preventDefault() für Space, um das Scrollen der Seite zu unterbinden).
  • Den deaktivierten Zustand selbst über aria-disabled="true" verwalten und verhindern, dass Click-Handler ausgelöst werden.

Umschalter-Schaltflächen

Dient die Schaltfläche als Umschalter (Stummschalten / Ton einschalten, Abspielen / Pause, Folgen / Nicht mehr folgen), sollte aria-pressed auf "true" oder "false" gesetzt werden. Screenreader geben den Zustand zusammen mit der Beschriftung aus: „Stummschalten, Umschalter, nicht gedrückt“.

Häufige Fehler

  • <div onclick="…">Absenden</div> — nicht fokussierbar, nicht per Tastatur bedienbar, keine Rolle. Maus-Nutzende können es verwenden; alle anderen nicht.
  • <a href="#" onclick="…"> als Schaltfläche getarnt. Der Browser behandelt es als Link, der Screenreader kündigt es als Link an, die Nutzerin bzw. der Nutzer erwartet Navigation.
  • role="button" ohne tabindex="0" — der Screenreader kündigt „Schaltfläche“ an, aber die Tastatur erreicht das Element nicht.
  • Benutzerdefinierte Schaltflächen, die auf Enter reagieren, aber nicht auf Space.
  • Schaltflächen ohne zugänglichen Namen — reine Icon-Schaltflächen ohne aria-label sind der am häufigsten von axe-core gefundene Einzelfehler.

Beispiel

<!-- Bevorzugt -->
<button type="button" aria-pressed="false">Mute</button>

<!-- Nur wenn <button> nicht möglich ist -->
<div
  role="button"
  tabindex="0"
  aria-pressed="false"
  onclick="toggleMute()"
  onkeydown="if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); toggleMute(); }"
>
  Mute
</div>