Alt Text для сгенерированного SVG - PullRequest
Новая
       63

Alt Text для сгенерированного SVG

0 голосов
/ 19 декабря 2018

КАК я могу добавить альтернативный текст для следующего сгенерированного SVG?У меня есть только доступ к HTML.текущий SVG находится в div.Это чтение чисел, сгенерированных функцией Js. 

<svg class="barcode" role="img" aria-labelledby="title desc" jsbarcode-format="code39" jsbarcode-value="" jsbarcode-textmargin="0" jsbarcode-width="1" width="116px" height="140px" x="0px" y="0px" viewBox="0 0 116 140" xmlns="http://www.w3.org/2000/svg" version="1.1" style="transform: translate(0,0)"><rect x="0" y="0" width="116" height="140" style="fill:#ffffff;"></rect><g transform="translate(10, 10)" style="fill:#000000;"><rect x="0" y="0" width="1" height="100"></rect><rect x="4" y="0" width="1" height="100"></rect><rect x="6" y="0" width="3" height="100"></rect><rect x="10" y="0" width="3" height="100"></rect><rect x="14" y="0" width="1" height="100"></rect><rect x="16" y="0" width="1" height="100"></rect><rect x="18" y="0" width="1" height="100"></rect><rect x="20" y="0" width="3" height="100"></rect><rect x="24" y="0" width="1" height="100"></rect><rect x="28" y="0" width="3" height="100"></rect><rect x="32" y="0" width="3" height="100"></rect><rect x="38" y="0" width="1" height="100"></rect><rect x="40" y="0" width="1" height="100"></rect><rect x="42" y="0" width="1" height="100"></rect><rect x="44" y="0" width="3" height="100"></rect><rect x="48" y="0" width="1" height="100"></rect><rect x="50" y="0" width="3" height="100"></rect><rect x="54" y="0" width="1" height="100"></rect><rect x="56" y="0" width="1" height="100"></rect><rect x="60" y="0" width="3" height="100"></rect><rect x="64" y="0" width="1" height="100"></rect><rect x="66" y="0" width="3" height="100"></rect><rect x="70" y="0" width="1" height="100"></rect><rect x="72" y="0" width="1" height="100"></rect><rect x="76" y="0" width="3" height="100"></rect><rect x="80" y="0" width="1" height="100"></rect><rect x="84" y="0" width="1" height="100"></rect><rect x="86" y="0" width="3" height="100"></rect><rect x="90" y="0" width="3" height="100"></rect><rect x="94" y="0" width="1" height="100"></rect><text style="font: 20px monospace" text-anchor="middle" x="48" y="120">NULL</text></g></svg>

Ответы [ 2 ]

0 голосов
/ 20 декабря 2018

Ваш SVG имеет атрибут aria-labelledby="title desc", но в коде SVG нет элементов с id="title" или id="desc".

Это означает, что вы должны определить два элемента с id="title"и id="desc" для того, чтобы ваш SVG был доступен.

Например: 

<h2 id="title">My SVG title</h2>
<div id="desc">This is an SVG description</div>
<!-- insert your original svg code after -->
0 голосов
/ 19 декабря 2018

Если у вас нет возможности изменить сам элемент <svg>, самый простой подход - обернуть его в DIV с ролью ARIA img и использовать aria-label для предоставления альтернативы текста: 

<div class="svg-wrapper" role="img" aria-label="A cowboy riding a triceratops"> 
  <svg role="img" aria-labelledby="title desc" ... >
    <rect x="0" y="0" width="116" height="140" ... ></rect>
    <!-- more SVG elements -->
  </svg>
</div>

Семантически <div role="img" aria-label="foo"> эквивалентно <img src="foo.png" alt="foo">.Вы можете найти пример в Тег IMG и ARIA role = атрибут / значение img .

Обратите внимание, что роль ARIA img определяется как имеющая " children presentational", что означает, что браузер не должен передавать содержимое, вложенное в DIV, вспомогательным технологиям.Поэтому тот факт, что вложенный SVG имеет свою собственную роль изображения и поврежденный атрибут aria-labelledby, не должен иметь значения.

Если вы можете контролировать содержимое элемента <svg>, тогда этот шаблон будет работать: 

<div class="svg-wrapper">  
  <svg role="img" aria-labelledby="unique-id-123" ... >
    <title id="unique-id-123">A cowboy riding a triceratops</title> 
    <rect x="0" y="0" width="116" height="140" ... ></rect>
    <!-- more SVG elements -->
  </svg>
</div>

Будьте осторожны, чтобы элементу <title> был присвоен уникальный идентификатор.

...