SVG/Element/title

Das title-Element der SVG-Grafik oder Gruppierungselementen wie symbol, pattern, linearGradient eine Beschreibung, die nicht als Teil der graphischen Darstellung gerendert wird, in der Regel bei :hover jedoch als Tooltipp erscheint.
Wichtiger ist die Bedeutung des Elements als Teil des zugänglichen Namens, der Nutzern von Screenreadern als textliche Alternative ausgegeben wird.
Weil Browser dieses Element nicht ausgeben müssen und Tooltipps von Nutzern oft unbemerkt bleiben, sollten Beschreibungen, möglichst mit sichtbarem Text vorgenommen werden. Mit aria-labelledby lässt sich dieser für assistive Technologien referenzieren.

Syntax

Start-Tag: notwendig

End-Tag: notwendig

Elternelemente

Darf vorkommen in:
svg, alle Gruppierungselemente

erlaubte Inhalte

Zeichenkette

Beispiel

<svg> <title>Beispiele für lineare Farbverläufe</title> <defs> <desc>Hier werden die Farbverläufe definiert und über die id dann aufgerufen</desc> <linearGradient id="verlauf1" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="#dfac20" /> <stop offset="100%" stop-color="#3983ab" /> </linearGradient> <linearGradient id="verlauf2" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#dfac20" /> <stop offset="100%" stop-color="#3983ab" /> </linearGradient> <linearGradient id="verlauf3" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#dfac20" /> <stop offset="100%" stop-color="#3983ab" /> </linearGradient> </defs> ... </svg>

Beachten Sie: Das title-Element sollte aus Gründen der Abwärtskompatibilität mit SVG 1.1 das erste Kind des Elternelements sein.
In SVG ist es anders als in HTML möglich und erlaubt, mehrere title-Elemente zu verwenden.
Auch bei einer Einbindung in HTML ist neben dem HTML-title-Element ein weiteres SVG-title-Element im Inline-SVG zulässig.

Empfehlung: Verwenden Sie Beschreibungen, um Ihre Webseite zugänglicher für Screenreader zu machen.

Siehe auch

• barrierefreie SVGs

Weblinks

• W3C: DescriptionAndTitleElements