Question

我在网页中有以下SVG。除了我添加的title和desc标签之外，还有什么我可以做的才能使该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>

Answer 1

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

屏幕阅读器不统一支持

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>

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

1 个答案: