Element.ariaValueMin — Eigenschaft · JavaScript-Referenz

Signatur

Element.ariaValueMin

Beschreibung

Element.ariaValueMin gehört zu den ARIA-Reflexions-Eigenschaften (ARIA reflection) der Element-Schnittstelle. Sie spiegelt das HTML-Attribut aria-valuemin direkt wider. Wenn du die Eigenschaft liest, bekommst du den Attributwert. Wenn du sie setzt, wird das Attribut geschrieben. Das funktioniert, ohne dass du getAttribute() oder setAttribute() aufrufen musst.

aria-valuemin gibt assistiven Technologien wie Screenreadern den kleinsten zulässigen Wert eines Bereichs-Widgets an. Typische Rollen dafür sind slider, spinbutton, scrollbar, progressbar und meter. Meist wird das Attribut zusammen mit aria-valuemax und aria-valuenow verwendet, bei Bedarf auch mit aria-valuetext. So kann ein Screenreader den aktuellen Wert einordnen, zum Beispiel „30 von 0 bis 100“.

Brauchst du die Eigenschaft vor allem für eigene Widgets, also Steuerelemente aus <div>-Elementen mit einer ARIA-Rolle? Native Elemente wie <input type="range">, <progress> oder <meter> geben ihren Minimalwert schon über das min-Attribut an die Barrierefreiheits-Schnittstelle weiter. Für sie ist aria-valuemin überflüssig.

Der Wert ist immer ein String oder null. Zum Rechnen musst du ihn selbst umwandeln, z. B. mit Number() oder parseFloat(). Der Wert sollte eine gültige Dezimalzahl sein, die kleiner als aria-valuemax ist.

Parameter

Name	Typ	Default	Beschreibung
$value	string \| null		Nur beim Setzen: ein String mit einer Dezimalzahl, z. B. `"0"` oder `"-10.5"`. Mit `null` wird das Attribut `aria-valuemin` entfernt.

Rückgabewert

Typ

string | null

Beschreibung

Der aktuelle Wert des Attributs aria-valuemin als String. Ist das Attribut nicht gesetzt, wird null zurückgegeben.

Beispiele

Minimalwert eines eigenen Sliders lesen

// HTML: <div id="volume" role="slider" tabindex="0"
//        aria-valuemin="0" aria-valuemax="100" aria-valuenow="30"
//        aria-label="Lautstärke"></div>
const slider = document.getElementById('volume');

console.log(slider.ariaValueMin);          // String
console.log(typeof slider.ariaValueMin);
console.log(Number(slider.ariaValueMin) + 5); // zum Rechnen umwandeln

0 string 5

Wertebereich dynamisch setzen und Eingaben begrenzen

const spin = document.createElement('div');
spin.role = 'spinbutton';
spin.tabIndex = 0;
spin.ariaLabel = 'Anzahl Personen';
spin.ariaValueMin = '1';
spin.ariaValueMax = '8';
spin.ariaValueNow = '2';
spin.textContent = '2';
document.body.append(spin);

const clamp = (v) => {
  const min = Number(spin.ariaValueMin);
  const max = Number(spin.ariaValueMax);
  return Math.min(max, Math.max(min, v));
};

spin.addEventListener('keydown', (e) => {
  const now = Number(spin.ariaValueNow);
  let next = now;
  if (e.key === 'ArrowUp') next = clamp(now + 1);
  if (e.key === 'ArrowDown') next = clamp(now - 1);
  if (e.key === 'Home') next = Number(spin.ariaValueMin);
  if (next !== now) {
    e.preventDefault();
    spin.ariaValueNow = String(next);
    spin.textContent = String(next);
  }
});

console.log(spin.getAttribute('aria-valuemin'));

1

Attribut entfernen und mit Fallback für ältere Browser arbeiten

const bar = document.querySelector('[role="progressbar"]');

// Ist die ARIA-Reflexion verfügbar?
const supportsReflection = 'ariaValueMin' in Element.prototype;

const setMin = (el, value) => {
  if (supportsReflection) {
    el.ariaValueMin = value; // null entfernt das Attribut
  } else if (value === null) {
    el.removeAttribute('aria-valuemin');
  } else {
    el.setAttribute('aria-valuemin', value);
  }
};

setMin(bar, '0');
console.log(bar.hasAttribute('aria-valuemin'));
setMin(bar, null);
console.log(bar.hasAttribute('aria-valuemin'));

true false

// Wichtig · Fallstricke

Immer ein String: Setzt du eine Zahl, z. B. el.ariaValueMin = 0, wird sie in "0" umgewandelt. Beim Lesen bekommst du trotzdem nie eine Zahl zurück. Wandle den Wert vor Vergleichen deshalb mit Number() um, denn "10" < "9" ergibt true.
Keine Prüfung durch den Browser: Ungültige Werte wie "abc" oder ein Minimum, das größer als das Maximum ist, werden ohne Fehler übernommen. Solche Werte verwirren aber Screenreader.
Kein Einfluss auf das Verhalten: aria-valuemin begrenzt Eingaben nicht. Die Logik zum Begrenzen und die Tastatursteuerung musst du selbst schreiben.
Native Elemente bevorzugen: Für <input type="range">, <progress> und <meter> nimmst du min statt ARIA („First rule of ARIA“).
Standardwerte: Fehlt das Attribut, nehmen assistive Technologien bei slider, scrollbar und progressbar meist 0 als Minimum an. Die Eigenschaft liefert dann trotzdem null.
Browser-Kompatibilität: Chromium und Safari unterstützen die ARIA-Reflexion schon lange, Firefox erst ab Version 119. Für ältere Umgebungen kannst du die Unterstützung mit 'ariaValueMin' in Element.prototype prüfen und sonst auf setAttribute() zurückgreifen. In jsdom bzw. Node.js-Testumgebungen fehlt die Eigenschaft teilweise.

Siehe auch

Element.ariaValueMax Element.ariaValueNow Element.ariaValueText Element.role Element.setAttribute() Element.getAttribute() Element.ariaMultiLine