svg - 生成的 SVG 的替代文本

标签 svg accessibility alt nvda jaws-screen-reader

我如何为以下生成的 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>

最佳答案

您的 SVG 有一个 aria-labelledby="title desc"属性,但没有任何带有 id="title" 的元素或 id="desc"在 SVG 代码中。

这意味着您必须使用 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 -->

关于svg - 生成的 SVG 的替代文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53843725/

相关文章:

javascript - Vivus JS 似乎没有为某些 <path> 节点设置动画

html - 2 个不同的 SVG 路径动画以错误的方式动画

javascript - 通过的 react 组件在表单标签的可访问性单元测试中失败了吗?

html - 如何向对象添加替代文本?

php - 从 ACF 图像数组中提取 alt 和标题

css - 如何制作像 'marching ants'这样平滑的虚线边框旋转动画

css - SVG 在 html 图像标签上工作——而不是在 HTML5 Canvas 上

javascript - jQuery UI 对话框和 aria 控件

html - 我可以在同一个元素上使用 aria-label 和 aria-hidden ="true"吗?

python - 如何使用 Beautiful Soup 提取 "alt"的文本