Element.ariaRequired — Eigenschaft · JavaScript-Referenz

Signatur

Element.ariaRequired

Beschreibung

Die Eigenschaft ariaRequired der Schnittstelle Element gehört zur ARIA-Reflexion (ARIAMixin). Über sie lässt sich das Attribut aria-required direkt per JavaScript lesen und setzen, ohne getAttribute() oder setAttribute() zu benutzen. Der Wert ist ein String, kein Boolean.

Das Attribut sagt Screenreadern und anderen assistiven Technologien, dass ein Eingabefeld ein Pflichtfeld ist. Sinnvoll ist das vor allem bei eigenen Widgets mit Rollen wie combobox, gridcell, listbox, radiogroup, spinbutton, textbox oder tree, die keine nativen Formularelemente sind und daher das HTML-Attribut required nicht haben.

Mögliche Werte:

"true": Vor dem Absenden ist eine Eingabe nötig.
"false": Keine Eingabe nötig (Standardverhalten).
null: Das Attribut ist nicht gesetzt.

Wichtig: aria-required ändert nur die Semantik im Barrierefreiheitsbaum. Die Formularvalidierung des Browsers wird davon nicht ausgelöst, auch ein Absenden wird nicht verhindert. Die Prüfung musst du selbst schreiben oder bei nativen Elementen das Attribut required verwenden.

Parameter

Name	Typ	Default	Beschreibung
$value	string \| null	null	Beim Setzen: `"true"` oder `"false"`. Mit `null` wird das Attribut `aria-required` entfernt.

Rückgabewert

Typ

string | null

Beschreibung

Den aktuellen Wert des Attributs aria-required als String ("true" oder "false"). Ist das Attribut nicht gesetzt, kommt null zurück.

Beispiele

Wert lesen und ändern

// HTML: <div id="name" role="textbox" contenteditable="true" aria-required="true"></div>
const feld = document.getElementById('name');

console.log(feld.ariaRequired);
feld.ariaRequired = 'false';
console.log(feld.getAttribute('aria-required'));

true false

Pflichtfeld abhängig von einer Auswahl umschalten

// HTML:
// <input type="checkbox" id="firma"> Geschäftskunde
// <div id="ustid" role="textbox" contenteditable="true" aria-label="USt-IdNr."></div>
const checkbox = document.getElementById('firma');
const ustid = document.getElementById('ustid');

checkbox.addEventListener('change', () => {
  // Wenn das Kästchen nicht angehakt ist, wird das Attribut entfernt
  ustid.ariaRequired = checkbox.checked ? 'true' : null;
  console.log('aria-required:', ustid.getAttribute('aria-required'));
});

aria-required: true (nach dem Anhaken) aria-required: null (nach dem Abhaken)

Eigene Validierung für ARIA-Pflichtfelder

const form = document.querySelector('form');

form.addEventListener('submit', (event) => {
  const pflichtfelder = form.querySelectorAll('[aria-required="true"]');
  let gueltig = true;

  for (const el of pflichtfelder) {
    const leer = el.textContent.trim() === '';
    // Ergebnis der Prüfung ebenfalls per ARIA-Reflexion setzen
    el.ariaInvalid = leer ? 'true' : 'false';
    if (leer) gueltig = false;
  }

  if (!gueltig) {
    event.preventDefault();
    console.log('Bitte alle Pflichtfelder ausfüllen.');
  }
});

Bitte alle Pflichtfelder ausfüllen. (wenn ein Pflichtfeld leer ist)

// Wichtig · Fallstricke

Der Wert ist ein String, kein Boolean. el.ariaRequired = true wird zwar in "true" umgewandelt, aber el.ariaRequired = false ergibt den String "false". Der Ausdruck if (el.ariaRequired) ist dann trotzdem wahr. Vergleiche deshalb immer ausdrücklich mit === "true".
Keine Validierung: Das Attribut verhindert kein Absenden. Bei nativen <input>-, <select>- und <textarea>-Elementen solltest du stattdessen das HTML-Attribut required bzw. die Eigenschaft required verwenden. Beides gleichzeitig zu setzen ist überflüssig.
Kennzeichne Pflichtfelder zusätzlich sichtbar, zum Beispiel mit „*“ und einer Erklärung. aria-required wirkt nur für assistive Technologien.
Kompatibilität: Chromium und Safari unterstützen die ARIA-Reflexion schon länger, Firefox erst ab Version 119. Für ältere Browser kannst du auf setAttribute('aria-required', 'true') ausweichen, das funktioniert überall.

Siehe auch

Element.ariaPressed Element.ariaSelected Element.ariaSetSize Element.ariaChecked Element.ariaCurrent