Element.ariaPressed — Eigenschaft · JavaScript-Referenz

Signatur

Element.ariaPressed

Beschreibung

Die Eigenschaft ariaPressed gehört zum ARIAMixin und steht deshalb auf jedem Element zur Verfügung. Sie spiegelt das HTML-Attribut aria-pressed direkt wider: Wenn du die Eigenschaft liest, erhältst du den aktuellen Attributwert als String. Wenn du sie setzt, wird das Attribut geschrieben. Das ist gleichwertig zu getAttribute("aria-pressed") bzw. setAttribute("aria-pressed", …), nur kürzer.

Mit aria-pressed wird ein normaler Button zum Umschalter (Toggle-Button), etwa für „Fett“, „Stummschalten“ oder „Favorit“. Screenreader lesen den Zustand dann als „gedrückt“ oder „nicht gedrückt“ vor. Erlaubt sind diese Werte:

"true": Der Button ist gedrückt.
"false": Der Button ist ein Umschalter, aber gerade nicht gedrückt.
"mixed": gemischter Zustand, z. B. wenn eine Auswahl teilweise fett formatiert ist.
"undefined" bzw. ein fehlendes Attribut: Das Element ist kein Umschalter.

Verwende ariaPressed nur bei Elementen mit der Rolle button, also beim nativen <button> oder bei role="button". Die Beschriftung sollte sich beim Umschalten nicht ändern, denn der Zustand wird ja schon über das Attribut gemeldet. Ändert sich stattdessen die Beschriftung (z. B. „Abspielen“/„Pause“), lässt du aria-pressed weg.

Rückgabewert

Typ

string | null

Beschreibung

Einer der Strings "true", "false", "mixed" oder "undefined", bzw. null, wenn das Attribut nicht gesetzt ist. Setzt du null, wird das Attribut entfernt.

Beispiele

Zustand lesen und setzen

// HTML: <button id="bold" aria-pressed="false">Fett</button>
const btn = document.querySelector('#bold');

console.log(btn.ariaPressed);
btn.ariaPressed = 'true';
console.log(btn.getAttribute('aria-pressed'));

false true

Barrierefreier Toggle-Button

// HTML: <button id="mute" aria-pressed="false">Stumm</button>
const muteBtn = document.querySelector('#mute');
const video = document.querySelector('video');

muteBtn.addEventListener('click', () => {
  // Achtung: Der Wert ist ein String, kein Boolean
  const pressed = muteBtn.ariaPressed === 'true';
  muteBtn.ariaPressed = String(!pressed);
  if (video) video.muted = !pressed;
});

Gemischter Zustand für eine Formatierungsleiste

const boldBtn = document.createElement('button');
boldBtn.textContent = 'Fett';

const updateBold = (states) => {
  // states: Array mit dem Fett-Zustand je markiertem Textabschnitt
  if (states.every(Boolean)) boldBtn.ariaPressed = 'true';
  else if (states.some(Boolean)) boldBtn.ariaPressed = 'mixed';
  else boldBtn.ariaPressed = 'false';
};

updateBold([true, false, true]);
console.log(boldBtn.ariaPressed);

boldBtn.ariaPressed = null; // Attribut entfernen → kein Umschalter mehr
console.log(boldBtn.hasAttribute('aria-pressed'));

mixed false

// Wichtig · Fallstricke

Werte sind Strings: if (btn.ariaPressed) ist auch bei "false" wahr, weil jeder nicht-leere String als wahr gilt. Vergleiche deshalb immer ausdrücklich mit === "true". Setzt du einen Boolean, wird er in den String "true" bzw. "false" umgewandelt.
Keine Prüfung der Werte: Der Browser nimmt jeden String an. Ungültige Werte wie "yes" werden gespeichert, von Hilfstechnologien aber falsch oder gar nicht ausgewertet.
Nicht mit aria-checked/aria-selected verwechseln: Für Checkboxen, Schalter (role="switch") und Tabs sind andere Attribute zuständig.
Browser-Kompatibilität: Firefox unterstützt die ARIA-Reflection-Eigenschaften erst ab Version 119. Für ältere Browser verwendest du setAttribute("aria-pressed", …), das überall funktioniert.
Die Eigenschaft ändert nur die Semantik. Das Aussehen (z. B. eine CSS-Regel für [aria-pressed="true"]) und die Tastaturbedienung musst du selbst umsetzen. Mit einem nativen <button> bekommst du die Tastaturbedienung automatisch.

Siehe auch

Element.role Element.ariaChecked Element.ariaLevel Element.ariaPosInSet Element.ariaRequired