HTMLAreaElement.alt — Eigenschaft · JavaScript-Referenz

Signatur

HTMLAreaElement.alt

Beschreibung

Die Eigenschaft alt des Interfaces HTMLAreaElement gibt das HTML-Attribut alt eines <area>-Elements direkt wieder. Das Lesen liefert den Attributwert als String. Das Schreiben ändert das Attribut im DOM.

Ein <area>-Element legt innerhalb einer <map> einen klickbaren Bereich eines Bildes fest. Dieser Bereich hat keinen eigenen sichtbaren Text. Deshalb ist der Alternativtext die einzige zugängliche Beschriftung des Links. Screenreader lesen ihn vor, und er wird angezeigt, wenn das Bild nicht lädt. Laut HTML-Standard ist alt Pflicht, sobald das Element ein href-Attribut hat.

Typische Einsatzfälle:

Bildkarten dynamisch erzeugen, zum Beispiel für Grundrisse oder Landkarten
Barrierefreiheit prüfen, also Bereiche ohne Beschriftung finden
Beschriftungen übersetzen oder an Daten anpassen

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des alt-Attributs. Fehlt das Attribut, ist das Ergebnis ein leerer String "". Beim Schreiben wird der zugewiesene Wert in einen String umgewandelt.

Beispiele

Alternativtext auslesen und ändern

// HTML:
// <img src="plan.png" usemap="#plan" alt="Gebäudeplan">
// <map name="plan">
//   <area id="kueche" shape="rect" coords="0,0,100,80" href="/kueche" alt="Küche">
// </map>

const area = document.getElementById('kueche');
console.log(area.alt);

area.alt = 'Küche (Erdgeschoss)';
console.log(area.getAttribute('alt'));

Küche Küche (Erdgeschoss)

Bildkarte dynamisch mit Beschriftungen erzeugen

const raeume = [
  { name: 'Wohnzimmer', coords: '0,0,200,150', url: '/wohnzimmer' },
  { name: 'Bad', coords: '200,0,300,150', url: '/bad' }
];

const map = document.createElement('map');
map.name = 'grundriss';

for (const { name, coords, url } of raeume) {
  const area = document.createElement('area');
  area.shape = 'rect';
  area.coords = coords;
  area.href = url;
  area.alt = name; // zugängliche Beschriftung
  map.append(area);
}

document.body.append(map);
console.log([...map.areas].map(a => a.alt));

["Wohnzimmer", "Bad"]

Barrierefreiheit prüfen: Bereiche ohne alt finden

const fehlend = [...document.querySelectorAll('area[href]')]
  .filter(area => area.alt.trim() === '');

fehlend.forEach(area => {
  console.warn('Fehlender alt-Text:', area.href);
});

console.log(`${fehlend.length} Bereich(e) ohne Beschriftung`);

0 Bereich(e) ohne Beschriftung

// Wichtig · Fallstricke

Fehlendes und leeres Attribut sehen gleich aus: In beiden Fällen liefert area.alt einen leeren String. Mit area.hasAttribute('alt') lässt sich beides unterscheiden.
Barrierefreiheit: Ein <area> mit href, aber ohne sinnvollen Alternativtext ist für Screenreader-Nutzer nicht bedienbar. Der Text sollte das Ziel des Links beschreiben, nicht die Form des Bereichs.
Werte, die kein String sind, werden umgewandelt: area.alt = null ergibt den Text "null". Um das Attribut zu entfernen, verwendet man removeAttribute('alt').
Zur Sicherheit: Das Setzen von alt wird nicht als HTML interpretiert. Deshalb ist die Eigenschaft unbedenklich gegen XSS, auch bei Nutzereingaben.
Die Eigenschaft wird seit jeher von allen Browsern unterstützt.

Siehe auch

HTMLAreaElement.hash HTMLAreaElement.host HTMLAreaElement.port HTMLAreaElement.rel HTMLAreaElement.href