HTMLImageElement.alt — Eigenschaft · JavaScript-Referenz

Signatur

HTMLImageElement.alt

Beschreibung

Die Eigenschaft alt des Interfaces HTMLImageElement spiegelt das HTML-Attribut alt eines <img>-Elements wider. Sie enthält einen Ersatztext, der angezeigt wird, wenn das Bild nicht geladen werden kann oder das Laden von Bildern abgeschaltet ist. Außerdem lesen Screenreader diesen Text vor. Suchmaschinen werten ihn ebenfalls aus.

Der Alternativtext sollte die Funktion oder Aussage des Bildes wiedergeben, nicht bloß sein Aussehen. Bei einem Link-Icon beschreibt man also das Ziel („Startseite“) und nicht die Grafik („Haus-Symbol“). Rein dekorative Bilder erhalten einen leeren Alternativtext (alt=""). Dann überspringen assistive Technologien das Bild.

Man liest und schreibt die Eigenschaft wie einen gewöhnlichen String. Wenn Sie ihr etwas zuweisen, wird das Attribut sofort im DOM aktualisiert. Fehlt das Attribut, liefert die Eigenschaft einen leeren String. Das ist ein wichtiger Unterschied zu getAttribute('alt'), das in diesem Fall null zurückgibt.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Alternativtext. Fehlt das Attribut alt, ist das ein leerer String "". Beim Setzen wird der Wert in einen String umgewandelt und als Attribut gespeichert.

Beispiele

Alternativtext lesen und setzen

const img = document.createElement('img');
img.src = '/bilder/logo.png';
img.alt = 'Firmenlogo der Beispiel GmbH';
document.body.append(img);

console.log(img.alt);
console.log(img.outerHTML);

Firmenlogo der Beispiel GmbH <img src="/bilder/logo.png" alt="Firmenlogo der Beispiel GmbH">

Bilder ohne alt-Attribut finden (Barrierefreiheits-Check)

// Achtung: img.alt === '' erkennt fehlende UND bewusst leere Attribute.
// Nur hasAttribute unterscheidet beides.
const fehlend = [...document.images].filter((img) => !img.hasAttribute('alt'));

fehlend.forEach((img) => {
  console.warn('Kein alt-Attribut:', img.currentSrc || img.src);
  img.style.outline = '3px solid red';
});

console.log(`${fehlend.length} Bild(er) ohne alt-Attribut`);

Kein alt-Attribut: https://example.com/bilder/banner.jpg 1 Bild(er) ohne alt-Attribut

Dynamische Bildergalerie mit sinnvollen Alternativtexten

const fotos = [
  { src: '/fotos/berg.jpg', beschreibung: 'Zugspitze im Morgennebel' },
  { src: '/fotos/deko-linie.svg', beschreibung: '' } // dekorativ
];

const galerie = document.querySelector('#galerie');

for (const { src, beschreibung } of fotos) {
  const img = new Image();
  img.src = src;
  img.alt = beschreibung; // leerer String = dekorativ, Screenreader ignorieren es
  img.loading = 'lazy';
  galerie.append(img);
}

console.log([...galerie.querySelectorAll('img')].map((i) => JSON.stringify(i.alt)));

["\"Zugspitze im Morgennebel\"", "\"\""]

// Wichtig · Fallstricke

Fehlend oder leer: img.alt gibt in beiden Fällen "" zurück. Nur mit hasAttribute('alt') lässt sich ein fehlendes Attribut, das ein Fehler bei der Barrierefreiheit ist, von einem bewusst leeren Attribut für dekorative Bilder unterscheiden.
Nicht als Bildunterschrift oder Tooltip verwenden: Den Tooltip beim Überfahren mit der Maus erzeugt das Attribut title, nicht alt. Ältere Versionen des Internet Explorers zeigten den alt-Text zwar als Tooltip an, das entspricht aber nicht dem Standard. Sichtbare Bildunterschriften gehören in <figcaption>.
Keine Wiederholungen: Formulierungen wie „Bild von …“ lassen Sie besser weg, denn Screenreader sagen die Rolle „Bild“ bereits selbst an.
Sicherheit: Die Zuweisung an alt wird nicht als HTML interpretiert. Deshalb ist sie auch bei Nutzereingaben unkritisch für XSS. Wenn Sie das Markup dagegen per String zusammensetzen, etwa mit innerHTML = `<img alt="${eingabe}">`, müssen Sie die Eingabe maskieren.
Kompatibilität: Die Eigenschaft wird in allen Browsern unterstützt. Das gleichnamige Attribut gibt es auch bei HTMLInputElement mit type="image" und bei HTMLAreaElement.

Siehe auch

HTMLBaseElement.target HTMLImageElement.align HTMLImageElement.name HTMLImageElement.src HTMLImageElement.x