使具有嵌套图像的嵌入式SVG可以访问

罗蒙森

我在网页中有以下svg。除了我添加titledesc标签之外,还有什么我可以做的以使该svg更易访问吗?例如,是否有属性,角色等。我可以image为视觉障碍的用户添加到标签中吗?

<svg id="SvgjsSvg1001" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs">
   <rect id="SvgjsRect1008" width="206" height="420" x="0" y="0" fill="#80ff72"></rect>
   <rect id="SvgjsRect1010" width="206" height="420" x="246.5" y="0" fill="#80ff72"></rect>
   <rect id="SvgjsRect1011" width="40.5" height="420" x="206" y="0" fill="#7ee8fa"></rect>
   <image id="SvgjsImage1012" xlink:href="./assets/river-crossing/common/raft.svg" width="206" height="206" x="206" y="107"></image>
   <image id="SvgjsImage1013" xlink:href="./assets/river-crossing/goat-apple-wolf/goat.svg" width="98" height="98" x="0" y="0"></image>
   <image id="SvgjsImage1014" xlink:href="./assets/river-crossing/goat-apple-wolf/apple.svg" width="98" height="98" x="0" y="108"></image>
   <image id="SvgjsImage1015" xlink:href="./assets/river-crossing/goat-apple-wolf/wolf.svg" width="98" height="98" x="0" y="216"></image>
   <image id="SvgjsImage1016" xlink:href="./assets/river-crossing/goat-apple-wolf/farmer.svg" width="98" height="98" x="0" y="324"></image>
   <title>Animation</title>
   <desc>Displays the animation</desc>
</svg>
用户9631883

清晰的“标题”和描述性的“描述”对于屏幕阅读器用户理解图像传达的内容至关重要。诸如“动画”,“显示动画”等一般信息对视障用户没有帮助。如果可能的话,使其清晰且具有描述性。

屏幕阅读器不统一支持SVG标题和desc。应该在SVG标签中使用role =“ img”和aria-labelledby来包含标题和desc id,以使图像更一致地可访问。

    <svg id="SvgjsSvg1001" width="100%" height="100%" role="img" aria-labelledby="titleid descid" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs">
   <rect id="SvgjsRect1008" width="206" height="420" x="0" y="0" fill="#80ff72"></rect>
   <rect id="SvgjsRect1010" width="206" height="420" x="246.5" y="0" fill="#80ff72"></rect>
   <rect id="SvgjsRect1011" width="40.5" height="420" x="206" y="0" fill="#7ee8fa"></rect>
   <image id="SvgjsImage1012" xlink:href="./assets/river-crossing/common/raft.svg" width="206" height="206" x="206" y="107"></image>
   <image id="SvgjsImage1013" xlink:href="./assets/river-crossing/goat-apple-wolf/goat.svg" width="98" height="98" x="0" y="0"></image>
   <image id="SvgjsImage1014" xlink:href="./assets/river-crossing/goat-apple-wolf/apple.svg" width="98" height="98" x="0" y="108"></image>
   <image id="SvgjsImage1015" xlink:href="./assets/river-crossing/goat-apple-wolf/wolf.svg" width="98" height="98" x="0" y="216"></image>
   <image id="SvgjsImage1016" xlink:href="./assets/river-crossing/goat-apple-wolf/farmer.svg" width="98" height="98" x="0" y="324"></image>
   <title id="titleid">Clear title</title>
   <desc id="descid">Description of the image</desc>
</svg>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

将图像更改为嵌入式SVG >>以具有所有SVG功能

GraphicsMagick是否具有嵌入式图像裁剪?

如何在fabricjs中将画布转换为具有嵌入式图像base64的SVG

如何使我的嵌入式svg图像拉伸以填充容器?

如何从SVG文件中提取嵌入式图像?

使用嵌入式PNG / JPG打印宽幅SVG图像

从嵌入式SVG设置XSL FO背景图像

Windows Home Server作为具有远程访问权限的嵌入式防火墙

具有嵌入式图像的IMAP PHP在本地主机上未显示Codeigniter

我可以在收到的电子邮件中找到有关嵌入式图像的信息?

有没有一种方法可以从<svg>标签外部缩放嵌入式SVG?

嵌套的嵌入式资源

嵌入式方法可以访问“父”字段吗?

IE可以,但是Chrome / Firefox不会在“ img”元素中呈现SVG嵌入式图像

嵌入式图像的BitmapSource

SVG / D3-带有嵌入式svg图像的g未显示(g为0乘0,且svg图像无处可见)

打印带有嵌入式图像的Jira问题?

带有邮戳API的嵌入式图像附件

从现有MailItem对象复制嵌入式图像

使用SVGKit渲染带有嵌入式Base64编码的png图像的SVG会占用大量内存

如果嵌入式背景svg具有“填充”属性,则不会在Firefox上显示

具有多个嵌入式行的Bootstrap崩溃

具有嵌入式Jetty的异步Servlet

如何编写具有嵌入式ID的JPQL SELECT?

具有json / xml响应的嵌入式码头

具有嵌入式匿名接口的结构的含义?

遍历具有嵌入式结构的结构

具有内在函数和汇编的嵌入式广播

具有嵌入式文档的MongoDB findOne()和updateOne()

TOP 榜单

热门标签

归档