Signatur
Beschreibung
Die Eigenschaft alt spiegelt das HTML-Attribut alt eines <input>-Elements wider. Sinnvoll ist sie nur bei type="image": Dann ist das Eingabefeld ein grafischer Absende-Button, und alt liefert den zugänglichen Namen dieses Buttons.
Screenreader lesen den Alternativtext vor. Browser zeigen ihn an, wenn das Bild aus src nicht geladen werden kann oder Bilder abgeschaltet sind. Der Text sollte deshalb die Aktion des Buttons beschreiben, etwa „Suchen“ oder „Bestellung absenden“, und nicht das Bild selbst wie „Lupe“.
Die Eigenschaft funktioniert in beide Richtungen: Beim Lesen erhältst du den aktuellen Attributwert als Zeichenkette. Beim Schreiben wird das Attribut alt im DOM gesetzt. Fehlt das Attribut, ist der Rückgabewert ein leerer String "". Bei anderen Typen als image kannst du den Wert zwar lesen und schreiben, er hat aber keine Wirkung.
Rückgabewert
alt. Wenn das Attribut fehlt, ist es ein leerer String. Beim Setzen wird der Wert in einen String umgewandelt und als Attribut geschrieben.Beispiele
Alternativtext eines Bild-Buttons auslesen
// HTML: <input type="image" id="suche" src="lupe.svg" alt="Suchen">
const button = document.querySelector('#suche');
console.log(button.alt);
console.log(button.getAttribute('alt'));Bild-Button dynamisch erzeugen und beschriften
const form = document.querySelector('form');
const submit = document.createElement('input');
submit.type = 'image';
submit.src = '/icons/senden.svg';
submit.alt = 'Bestellung absenden';
form.append(submit);
console.log(submit.outerHTML);Alt-Text an den Zustand anpassen
// Ein Bild-Button wechselt zwischen Abspielen und Pause
const toggle = document.querySelector('#player-toggle');
let playing = false;
toggle.addEventListener('click', (event) => {
event.preventDefault(); // type="image" würde sonst das Formular absenden
playing = !playing;
toggle.src = playing ? 'pause.svg' : 'play.svg';
toggle.alt = playing ? 'Pausieren' : 'Abspielen';
console.log(toggle.alt);
});Barrierefreiheit prüfen: Bild-Buttons ohne Alt-Text finden
const missing = [...document.querySelectorAll('input[type="image"]')]
.filter((input) => input.alt.trim() === '');
console.log(`${missing.length} Bild-Button(s) ohne Alternativtext`);
missing.forEach((el) => console.warn('Fehlendes alt:', el));// Wichtig · Fallstricke
- Nur bei
type="image"wirksam: Bei allen anderen Input-Typen wird das Attribut ignoriert. Normale Felder bekommen ihr Label über<label>oderaria-label. - Kein leerer Alt-Text: Anders als bei dekorativen
<img>istalt=""bei Bild-Buttons falsch. Der Button hätte dann keinen zugänglichen Namen und würde WCAG 1.1.1 und 4.1.2 verletzen. - Kein Tooltip:
altwird beim Überfahren mit der Maus nicht angezeigt. Dafür gibt es das Attributtitle, das sich aber nicht als Ersatz füralteignet. - Absende-Verhalten:
type="image"sendet das Formular ab und überträgt dabei die Klickkoordinaten (name.xundname.y). Wenn du den Button nur per JavaScript steuerst, rufepreventDefault()auf. - Kompatibilität: Wird seit jeher von allen Browsern unterstützt, auch von alten Versionen.