SVGDescElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGDescElement extends SVGElement

Beschreibung

SVGDescElement ist die DOM-Schnittstelle für das Element <desc> in SVG-Dokumenten. Das Element enthält eine ausführliche Textbeschreibung des übergeordneten Containers oder Grafikelements. Es wird nicht gezeichnet. Screenreader und andere Hilfstechnologien werten den Inhalt aber aus: Er ergibt die zugängliche Beschreibung (accessible description) des Elternelements.

Die Schnittstelle bringt keine eigenen Eigenschaften oder Methoden mit. Alles wird von SVGElement, Element, Node und EventTarget geerbt. In der Praxis nutzt man vor allem textContent, um die Beschreibung zu lesen oder zu ändern, und instanceof SVGDescElement, um den Elementtyp zu prüfen.

Man verwendet <desc> zusammen mit <title> (kurzer, zugänglicher Name) vor allem in Diagrammen, Infografiken und Icons, die per JavaScript erzeugt werden. Aus Gründen der Kompatibilität sollte <desc> das erste oder zweite Kindelement (direkt nach <title>) des beschriebenen Elements sein.

Rückgabewert

Typ

SVGDescElement

Beschreibung

Eine Instanz entsteht über document.createElementNS("http://www.w3.org/2000/svg", "desc") oder durch Parsen von SVG-Markup. Einen öffentlichen Konstruktor gibt es nicht.

Beispiele

Barrierefreies SVG-Diagramm dynamisch erzeugen

const SVG_NS = 'http://www.w3.org/2000/svg';

const svg = document.createElementNS(SVG_NS, 'svg');
svg.setAttribute('viewBox', '0 0 100 100');
svg.setAttribute('role', 'img');

const title = document.createElementNS(SVG_NS, 'title');
title.textContent = 'Umsatz 2024';

const desc = document.createElementNS(SVG_NS, 'desc');
desc.textContent = 'Balkendiagramm: Der Umsatz stieg von 40 % im ersten auf 80 % im vierten Quartal.';

// title zuerst, desc direkt danach
svg.append(title, desc);
document.body.append(svg);

console.log(desc instanceof SVGDescElement);
console.log(desc.tagName);

true desc

Vorhandene Beschreibung auslesen und aktualisieren

// <svg id="chart"><title>Temperatur</title><desc>Wird geladen …</desc></svg>
const desc = document.querySelector('#chart > desc');

const updateDescription = (min, max) => {
  desc.textContent = `Temperaturverlauf zwischen ${min} °C und ${max} °C.`;
};

updateDescription(12, 27);
console.log(desc.textContent);

Temperaturverlauf zwischen 12 °C und 27 °C.

SVG-Icons ohne Beschreibung finden (Barrierefreiheits-Check)

const missing = [...document.querySelectorAll('svg')]
  .filter((svg) => ![...svg.children].some((el) => el instanceof SVGDescElement));

console.log(`${missing.length} SVG(s) ohne <desc> gefunden`);

3 SVG(s) ohne <desc> gefunden

// Wichtig · Fallstricke

Namensraum beachten: document.createElement('desc') erzeugt ein unbekanntes HTML-Element (HTMLUnknownElement), kein SVGDescElement. Verwende immer createElementNS('http://www.w3.org/2000/svg', 'desc').
<desc> wird nicht dargestellt und erzeugt keinen Tooltip. Für einen sichtbaren Hover-Text ist <title> zuständig.
Nicht jeder Screenreader liest <desc> zuverlässig vor. Für breite Unterstützung setzt man zusätzlich role="img" und aria-labelledby/aria-describedby mit Verweis auf die IDs von title und desc.
Wird ein SVG über <img src="…svg"> eingebunden, ist dessen DOM nicht per Skript erreichbar. Die Beschreibung muss dann über das alt-Attribut erfolgen.
Die Schnittstelle wird von allen modernen Browsern unterstützt. Sie hat keine eigenen Mitglieder, es gibt also keine Kompatibilitätsunterschiede über SVGElement hinaus.

Siehe auch

CSSPseudoElement SVGDefsElement SVGMaskElement SVGRectElement SVGSetElement