Alt Text for generated SVG

Question

HOW can i add alt text for the following generated SVG ? I have only access to the html. the flowing SVG is in div. This is reading the numbers generated by Js function.

<svg class="barcode" role="img" aria-labelledby="title desc" jsbarcode-format="code39" jsbarcode-value="" jsbarcode-textmargin="0" jsbarcode-width="1" width="116px" height="140px" x="0px" y="0px" viewBox="0 0 116 140" xmlns="http://www.w3.org/2000/svg" version="1.1" style="transform: translate(0,0)"><rect x="0" y="0" width="116" height="140" style="fill:#ffffff;"></rect><g transform="translate(10, 10)" style="fill:#000000;"><rect x="0" y="0" width="1" height="100"></rect><rect x="4" y="0" width="1" height="100"></rect><rect x="6" y="0" width="3" height="100"></rect><rect x="10" y="0" width="3" height="100"></rect><rect x="14" y="0" width="1" height="100"></rect><rect x="16" y="0" width="1" height="100"></rect><rect x="18" y="0" width="1" height="100"></rect><rect x="20" y="0" width="3" height="100"></rect><rect x="24" y="0" width="1" height="100"></rect><rect x="28" y="0" width="3" height="100"></rect><rect x="32" y="0" width="3" height="100"></rect><rect x="38" y="0" width="1" height="100"></rect><rect x="40" y="0" width="1" height="100"></rect><rect x="42" y="0" width="1" height="100"></rect><rect x="44" y="0" width="3" height="100"></rect><rect x="48" y="0" width="1" height="100"></rect><rect x="50" y="0" width="3" height="100"></rect><rect x="54" y="0" width="1" height="100"></rect><rect x="56" y="0" width="1" height="100"></rect><rect x="60" y="0" width="3" height="100"></rect><rect x="64" y="0" width="1" height="100"></rect><rect x="66" y="0" width="3" height="100"></rect><rect x="70" y="0" width="1" height="100"></rect><rect x="72" y="0" width="1" height="100"></rect><rect x="76" y="0" width="3" height="100"></rect><rect x="80" y="0" width="1" height="100"></rect><rect x="84" y="0" width="1" height="100"></rect><rect x="86" y="0" width="3" height="100"></rect><rect x="90" y="0" width="3" height="100"></rect><rect x="94" y="0" width="1" height="100"></rect><text style="font: 20px monospace" text-anchor="middle" x="48" y="120">NULL</text></g></svg>

Circumlocution

Answer 1

If you don't have any ability to change the <svg> element itself, the easiest approach is to wrap it in a DIV with the ARIA img role, and use aria-label to provide the text alternative:

<div class="svg-wrapper" role="img" aria-label="A cowboy riding a triceratops"> 
  <svg role="img" aria-labelledby="title desc" ... >
    <rect x="0" y="0" width="116" height="140" ... ></rect>
    <!-- more SVG elements -->
  </svg>
</div>

Semantically, <div role="img" aria-label="foo"> is equivalent to <img src="foo.png" alt="foo">. You can find an example at IMG Tag & ARIA role="img" attribute/value.

Note that the ARIA img role is defined as having "children presentational", which means the browser should not pass the content nested inside the DIV to assistive technology. So the fact that the nested SVG has it's own image role and a broken aria-labelledby attribute shouldn't matter.

If you can control the content of the <svg> element, then this pattern will work:

<div class="svg-wrapper">  
  <svg role="img" aria-labelledby="unique-id-123" ... >
    <title id="unique-id-123">A cowboy riding a triceratops</title> 
    <rect x="0" y="0" width="116" height="140" ... ></rect>
    <!-- more SVG elements -->
  </svg>
</div>

Be careful to give the <title> element a unique ID attribute.

Maishamaisie

Based on the names of the IDs in the OP, and using your second example, in addition to the <title> svg element and referring to it in the aria-labelledby, they could also have a <desc> svg element and refer to it in the aria-describedby attribute (assuming they can control the content of the svg). – Rubin

Yes, an accessible description is also possible. I left that out of my answer because it doesn't have an equivalent in plain HTML, and the question was about alt text. The SVG code in the OP looks like it may be a bar chart, so an extra description may be warranted. But to describe the JS-generated bar chart in detail, the <desc> element would also need to be generated, and that's probably out of the scope here. – Maishamaisie

Answer 2

Your SVG has an aria-labelledby="title desc" attribute, but there isn't any element with id="title" or id="desc" in the SVG code.

This means that you must define two elements with id="title" and id="desc" in order for your SVG to be accessible.

For instance:

<h2 id="title">My SVG title</h2>
<div id="desc">This is an SVG description</div>
<!-- insert your original svg code after -->

Coquette

Answer 3

You can only set a role="img" and aria-label="something" to your <svg>.

More info here.

Statue