使带有嵌套图像的内联 SVG 可访问

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.dev/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

清晰的 'title' 和描述性的 'desc' 对于屏幕 reader 用户了解图像传达的内容至关重要。 'Animation'、'Displays Animation' 等通用信息对视障用户没有帮助。如果可能，请使其清晰明了。

屏幕 reader 不统一支持 SVG 标题和描述。应在 SVG 标记中使用 role="img" 和 aria-labelledby 以包含标题和描述 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.dev/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 可访问

Make Inline SVG With Nested Images Accessible

html

svg

accessibility

wai-aria