SVG/Element/title

Aus SELFHTML-Wiki
< SVG‎ | Element
Wechseln zu: Navigation, Suche

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

Weblinks