HTML macro in Confluence strips <title> element from inline SVG.

When adding an SVG image inline to a page in Confluence using the HTML macro, the macro strips any <title> element within the SVG. This is problematic for accessibility, because the title element is meant to provide a text alternative for the SVG image.

For example, when the following SVG image is added as code to the HTML macro:

<svg version="2.0" width="300" height="50">
<title>Green rectangle</title>
<desc>A light green rectangle with rounded corners and a dark green border.</desc>
<rect width="100%" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" />
</svg>

It will be rendered in the page as: 

<svg version="2.0" width="300" height="50">

<desc>A light green rectangle with rounded corners and a dark green border.</desc>
<rect width="100%" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" />
</svg>

And the title element, "<title>Green rectangle</title>", is stripped.

1 answer

This widget could not be displayed.
Ann Worley Atlassian Team May 04, 2017

The title was not stripped on my test instance after I saved the macro and edited it was still there - what version of Confluence are you using so I can test on your version?

Screen Shot 2017-05-04 at 2.32.11 PM.png

 

Atlassian Confluence 5.9.8 (node3: 3c2281ea)

For clarification, I notice that the title is still present in Preview and is only stripped on Save.

Ann Worley Atlassian Team May 04, 2017

I did "View Source" after saving and it was still there:

 

Screen Shot 2017-05-04 at 2.55.24 PM.pngI will try on Confluence 5.9.8 and see what I get.

Indeed, when you View Source from the actions menu within Confluence, the title tag will be there, because you are looking at the content stored within Confluence. However, when the published content is rendered in the browser, if you use the browser's View Source, the title element will be missing.

Try this in the browser's javascript console: document.querySelectorAll('svg > title').length > 0;

This should be true if the title is there, but it is not so the statement returns false.

Ann Worley Atlassian Team May 04, 2017

You are right, the title tag gets stripped. While reading on the subject I found that a page can only have one title tag, which would be the Confluence page title, like:

<title>123 - Demonstration Space - Confluence</title>

I saw examples that suggested adding the title to the image as in this example:

<svg version="2.0" width="300" height="50" title="Green rectangle">
<desc>A light green rectangle with rounded corners and a dark green border.</desc>
<rect width="100%" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" />
</svg>

That one does not get stripped during rendering; please let me know if it is helpful.

The html title attribute is different than a title tag in that it should get mapped to the description/help text property in the Accessibility API; the SVGTitleElement should map to an accessible name property, while the SVGDescElement should map to the description/help text in the Accessibility API. 

Also, adding an html title attribute will add a tooltip on mouseover, which we may not want.

A better attribute for accessibility name would be aria-label or aria-labelledby refering to the child title element by id.

aria-label may be a workaround, but Confluence should not strip title element descendants of SVG, because they are in a different namespace: https://www.w3.org/TR/SVG2/struct.html#TitleElement versus https://www.w3.org/TR/html/document-metadata.html#elementdef-title

Dear Michael,

you may try embedding your SVG in an object tag. This typically solves all negative interactions between the parent HTML document and the SVG document.

Andreas

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted Monday in Confluence

Why start from scratch? Introducing four new templates for Confluence Cloud

Hi my Community friends!  For those who don't know me, I'm a product marketer on the Confluence Cloud team - nice to meet you! For those of you who do, you know that I've been all up in your Co...

429 views 4 6
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you