CODEWITHSUNDEEP
svgaccessibilityaltnvdajaws-screen-reader
SARA ZAHAN
SARA ZAHAN

Reputation: 83

Alt Text for generated SVG

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>

Upvotes: 7

Views: 4423

Answers (3)

Murillo de Miranda Pereira
Murillo de Miranda Pereira

Reputation: 309

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

More info here.

Upvotes: -1

Adam
Adam

Reputation: 18855

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 -->

Upvotes: 2

andrewmacpherson
andrewmacpherson

Reputation: 1591

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.

Upvotes: 1

Related Questions