我如何为以下生成的SVG添加替代文本?我只能访问html。流动的SVG在div中。这是读取Js函数生成的数字。
<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>
答案 0 :(得分:2)
您的SVG具有aria-labelledby="title desc"
属性,但是SVG代码中没有任何元素带有id="title"
或id="desc"
。
这意味着您必须使用id="title"
和id="desc"
定义两个元素,以便可以访问SVG。
例如:
<h2 id="title">My SVG title</h2>
<div id="desc">This is an SVG description</div>
<!-- insert your original svg code after -->
答案 1 :(得分:0)
如果您无权更改<svg>
元素本身,最简单的方法是将其包装为具有ARIA img
角色的DIV,然后使用aria-label
进行更改。提供文字替代:
<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>
在语义上,<div role="img" aria-label="foo">
等效于<img src="foo.png" alt="foo">
。您可以在IMG Tag & ARIA role="img" attribute/value上找到示例。
请注意,ARIA img
role被定义为具有“ children presentational”,这意味着浏览器不应将嵌套在DIV中的内容传递给辅助技术。因此,嵌套SVG具有其自己的图像角色和损坏的aria-labelledby
属性这一事实不重要。
如果您可以控制<svg>
元素的内容,那么此模式将起作用:
<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>
请注意为<title>
元素赋予唯一的ID属性。
答案 2 :(得分:0)
您只能将role="img"
和aria-label="something"
设置为<svg>
。
更多信息here。