Validation: svg with title or desc

Post here if your topic is about CSS HTML Validator but doesn't fit in another forum.
Post Reply
BfzPL
Rank 0 - Newcomer
Posts: 8
Joined: Sun Jul 22, 2018 8:44 am

Validation: svg with title or desc

Post by BfzPL »

For the following source line I get confused by the validation results:
<svg title="Siegel: Gepr&uuml;ft durch SIWECOS" width="150" height="58" id="siwecos-seal"></svg>

CHV-P2018 (v18.0300) lists one error:
The "title" attribute is not valid for the "svg" element. Some valid attributes for this element are: "alignment-baseline", "baseline-shift", "baseProfile", "class", "clip", "clip-path", "clip-rule", "contentScriptType", "contentStyleType", "cursor", "direction", "display", "dominant-baseline", "enable-background", "externalResourcesRequired", "fill", "fill-opacity", "fill-rule", "filter", "flood-color", "flood-opacity", "glyph-orientation-horizontal", "glyph-orientation-vertical", "height", "id", "image-rendering", "kerning", "lang", "letter-spacing", "lighting-color", "marker-end", "marker-mid", "marker-start", "mask", "opacity", "overflow", "paint-order", "pointer-events", "preserveAspectRatio", "requiredExtensions", "requiredFeatures", "role", "shape-rendering", "stop-color", "stop-opacity", "stroke", "style", "systemLanguage", "tabindex", "text-anchor", "text-decoration", "text-rendering", "transform", "unicode-bidi", "vector-effect", "version", "viewBox", "visibility", "width", "word-spacing", "writing-mode", "x", "xml:base", "xml:lang", "xml:space", "y", "zoomAndPan", "aria-*" attributes, "color*" attributes, "font-*" attributes, "on" attributes (like event handlers), and "stroke-*" attributes.

and one warning:
This SVG element (with id="siwecos-seal") contains no "title" or "desc" element. Using "title" and "desc" elements to provide text-only titles (which can appear as tooltips) and descriptions generally improves the accessibility of SVG images. This message is displayed up to 5 times.

As you can see, the "title" attribute exists. Or do I misunderstand the warning, so the error message is right? The same if I try it with "desc".
I placed this part only for accessibility and because the warning hints
me to this good point.

Using "desc" instead, I get beside the warning above the following 2 errors:
The "desc" attribute is not valid for the "svg" element. Some valid attributes for this element are: "alignment-baseline", "baseline-shift", "baseProfile", "class", "clip", "clip-path", "clip-rule", "contentScriptType", "contentStyleType", "cursor", "direction", "display", "dominant-baseline", "enable-background", "externalResourcesRequired", "fill", "fill-opacity", "fill-rule", "filter", "flood-color", "flood-opacity", "glyph-orientation-horizontal", "glyph-orientation-vertical", "height", "id", "image-rendering", "kerning", "lang", "letter-spacing", "lighting-color", "marker-end", "marker-mid", "marker-start", "mask", "opacity", "overflow", "paint-order", "pointer-events", "preserveAspectRatio", "requiredExtensions", "requiredFeatures", "role", "shape-rendering", "stop-color", "stop-opacity", "stroke", "style", "systemLanguage", "tabindex", "text-anchor", "text-decoration", "text-rendering", "transform", "unicode-bidi", "vector-effect", "version", "viewBox", "visibility", "width", "word-spacing", "writing-mode", "x", "xml:base", "xml:lang", "xml:space", "y", "zoomAndPan", "aria-*" attributes, "color*" attributes, "font-*" attributes, "on" attributes (like event handlers), and "stroke-*" attributes.
---
[HTML Tidy] <svg> proprietary attribute "desc"

Please give me an advise and/or update the tool.

You can obtain the SVG image beeing in request and I use at
http://blindenfreizeiten.de/seal.svg
and the JavaScript included/generated one at
http://blindenfreizeiten.de/seal.js

Both are used on my (German) page http://blindenfreizeiten.de/Technik.html
(title: technical background information) at the end.

The original ones are from the security page (German server checker) at
https://www.siwecos.de/wiki/Siwecos-Siegel
as https://siwecos.de/wp-content/uploads/2018/03/seal.svg
respectively https://siwecos.de/wp-content/plugins/s ... st/seal.js

I've my own versions of both files because I corrected much problems the
actual CHV encountered on the originals. (To the originators I report the found
problems.)
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Validation: svg with title or desc

Post by Albert Wiersch »

Hello,

I think you are confusing elements with attributes. In SVG, there is a "title" element but the "title" attribute is not valid for "svg".

So, instead of:

Code: Select all

<svg title="Siegel: Gepr&uuml;ft durch SIWECOS" width="150" height="58" id="siwecos-seal">
...
Please try this:

Code: Select all

<svg width="150" height="58" id="siwecos-seal">
<title>Siegel: Gepr&uuml;ft durch SIWECOS</title>
...
In future updates, CSS HTML Validator should generate this message when a "title" attribute is used with an "svg" element:
The "title" attribute is not valid for the "svg" element. Use a "title" element instead of a "title" attribute in SVG.

I hope that will be clearer. It's also a lot shorter. :D

Similarly, "desc" is an element and not an attribute.

I hope this helps. Please let me know if you have any more questions.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
BfzPL
Rank 0 - Newcomer
Posts: 8
Joined: Sun Jul 22, 2018 8:44 am

Re: Validation: svg with title or desc

Post by BfzPL »

Moving the content of the title attribute to inside the svg enclosed title tag worked well.

Code: Select all

<svg title="tttt" ssss></svg>
-->

Code: Select all

<svg ssss><title>tttt</title></svg>
Many thanks for clarifying it and the upcoming change of message texts.
Post Reply