aria-pressed

Einsatzbereiche

Auf einer Schaltfläche, die als Umschalter fungiert — Ton an/aus, Folgen/Nicht-mehr-folgen, Fett/nicht-fett in einem Texteditor, Seitenleiste ein/aus. Die Schaltfläche wechselt den Zustand, führt jedoch keine Navigation durch; die Beschriftung bleibt gleich, und nur der Gedrückt-Zustand kommuniziert die Änderung.

Drei Werte sind gültig:

• aria-pressed="false" — der Schalter ist deaktiviert.
• aria-pressed="true" — der Schalter ist aktiviert.
• aria-pressed="mixed" — verwendet, wenn der Schalter mehrere Unterelemente steuert, die sich in einem gemischten Zustand befinden (einige an, einige aus). In der Praxis selten; die meisten Entwicklerinnen und Entwickler teilen solche Fälle stattdessen in separate Steuerelemente auf.

Wenn eine Schaltfläche kein Umschalter ist — wenn sie lediglich ein Formular absendet oder ein Modal öffnet — darf aria-pressed nicht verwendet werden. Für Aufklappsteuerelemente empfiehlt sich aria-expanded; für einfache Aktionsschaltflächen wird kein Zustandsattribut benötigt.

Synchronisierung des Zustands

aria-pressed ist ein Zustand, der sich bei jeder Benutzerinteraktion ändert. Der Click-Handler, der das visuelle Erscheinungsbild der Schaltfläche aktualisiert, muss gleichzeitig das Attribut aktualisieren. Beides darf niemals auseinanderlaufen — wenn das Symbol den Ton-aus-Zustand anzeigt, muss aria-pressed den Wert "true" tragen.

<button
  type="button"
  aria-pressed="false"
  onclick="
    const next = this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true';
    this.setAttribute('aria-pressed', next);
    toggleMute(next === 'true');
  "
>
  Mute
</button>

Häufige Fehler

• aria-pressed auf einem Nicht-Button-Element setzen (einem <div> oder <a>). Stattdessen role="button" verwenden oder besser zu <button> wechseln.
• Den visuellen Zustand per CSS umschalten, ohne aria-pressed zu aktualisieren. Screenreader-Nutzende hören dauerhaft denselben Zustand.
• aria-pressed="true" auf einer Schaltfläche verwenden, die kein Umschalter ist (z. B. „Absenden“) — das veranlasst die assistive Technologie, einen irrelevanten Zustand anzukündigen.
• aria-pressed mit aria-selected (für Elemente in einem Einzel-Auswahl-Widget wie einem Tab oder einer Option) oder aria-checked (für Checkboxen und Radiobuttons) verwechseln. Jedes Attribut hat eine andere Semantik; es ist dasjenige zu wählen, das zum Widget-Muster passt.