Сделать Инлайн SVG с вложенными изображениями Доступными

Обновить

April 2019

Просмотры

32 раз

1

У меня есть следующие ГСВ в виде веб - страницы. Кроме того, 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>

1 ответы

1

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