CODEWITHSUNDEEP
htmlsvgaccessibilitywai-aria
Foobar
Foobar

Reputation: 8487

Make Inline SVG With Nested Images Accessible

I have the following svg in a webpage. Besides the title and desc tags I have added, is there anything else I can do to make this svg more accessible? For instance, are there attributes, roles, etc. I can add to the image tags for visually impaired users?

<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>

Upvotes: 1

Views: 256

Answers (1)

user 9631883
user 9631883

Reputation: 496

A clear 'title' and a descriptive 'desc' are essential for Screen reader users to understand what the image conveys. Genereic information like 'Animation', 'Displays Animation' etc. doesn't help visually impaired users. Make it clear and descriptive if possible.

SVG title and desc are not uniformly supported by screen readers. role="img" and aria-labelledby should be used in the SVG tag to include title and desc id to arrive at a more consistent accessible name for the image.

    <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>

Upvotes: 1

Related Questions