Search code examples
javascripthtmlsvgaccessibility

How to address multiple tooltips from SVG

I have an SVG with a title element, as well as polygons with their own empty titles in the hopes of preventing the parent title from appearing when hovering over the polygons because I have a custom JavaScript tooltip for the polygons. So something like

<svg aria-labelledby="title1">
<title id = "title1">My big title</title>
<polygon aria-labelledby="title2"></polygon>
// this title element is dynamically generated by JS after the rest of the SVG is added to page
<title id="title2"></title>
</svg>

The SVG is generated dynamically from a library and I use JavaScript to append the blank title to remove the main title tooltip from polygons, but after running the JavaScript the tooltip still appears even though the new blank titles are in the DOM.

If I go into the developer tools and edit HTML, but make no changes and then hover over the polygons only the custom tooltip displays as expected. It seems that the JavaScript code adds the blank titles but the browser is cacheing the previous aria data state. Is there any way to use JavaScript to force the browser to reevaluate the aria metadata? I've tried basic things like adding and removing classes

Edit:

<svg  viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <title>Title 1</title>
  <rect id="rect1" x="11" y="1" width="8" height="8">
  </rect>
</svg>

var newtitle=document.createElement("title")
newtitle.innerText = "Title 2"
$("#rect1").append(newtitle)

I need the title in the parent SVG for Aria screen reader purposes, but don't want the tooltip to appear because it clashes with JS tooltip. I create a sep title for the polygon/rect object so that it can have its own blank title (or non blank for this example just to see it's not changing) but when I hover over rects I get parent title still. If I don't use JavaScript but create the SVG with a title in the rect manually it works as expected ie

<svg  viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
<title>Title 1</title>
  <rect id="rect1" x="11" y="1" width="8" height="8">
  <title>Title 2</title>
  </rect>
</svg>

This works but adding the second title with JS doesn't

Solution

  • There seem to be two misunderstandings in the question, if I got the question right.

    1. ARIA attributes like aria-labelledby do not change browser behaviour like tooltips. They only control what gets exposed to assistive technology via the accessibility tree.
    2. You can not have several <title> attributes inside one element¹.

    For accessibility, there are other ways to provide an accessible name, most notably aria-label, which will not generate a tooltip in the first place.

    <svg aria-label="Title 1" viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <rect id="rect1" x="11" y="1" width="8" height="8"/>
</svg>

    If the library does not allow producing this code, you can correct it later with JavaScript:

    const svg = document.querySelector('svg');
const title = svg.querySelector('title'); // only the first, topmost one
svg.setAttribute('aria-label', title.textContent);
svg.removeChild(title);
    <svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <title>Title 1</title>
  <rect id="rect1" x="11" y="1" width="8" height="8"/>
</svg>

    1. Except for if they have different lang attributes.