Safari VoiceOver SVG объявляет теги внутри `как отдельные изображения - PullRequest
Новая
       128

Safari VoiceOver SVG объявляет теги внутри `как отдельные изображения

0 голосов
/ 24 февраля 2020

У меня есть элемент <svg />, и когда я перемещаюсь к нему в Safari с помощью VoiceOver, VO объявляет 6 разных изображений вместо одного. Chrome отлично работает, и этот элемент объявляется как «немаркированное изображение»: 

<svg aria-labelledby="imageLabel-10" class="foo" viewBox="0 -60 577 586">
   <title id="sometitle-10"></title>
   <defs>
      <polygon id="someid" points="1 2 3">
      </polygon>
      <path d="M.123" id="someOtherId">
      </path>
      <mask fill="white" id="oneMoreId">
         <use xlink:href="#someHred">
         </use>
      </mask>
   </defs>
   <g fill="none" fill-rule="evenodd">
      <g style="transform: translateY(-22.0061px); transform-origin: 396.328px 301.186px;">
         <path d="M225" fill="#F75647" fill-rule="nonzero" transform="translate(0, 0)">
         </path>
      </g>
      <g mask="url(#someHref)">
         <image height="461" transform="scale(1.1)" width="693" x="60" xlink:href="//cuteCDNPath.jpg" y="-10" style="transform: scale(1.05339); transform-origin: 286.5px 220.5px;">
         </image>
         <use fill="#000" fill-opacity="0.01" xlink:href="#someOtherHref" style="mix-blend-mode: multiply;">
         </use>
      </g>
   </g>
</svg>

macOS Mojave 10.14.6 Safari 13.0.5

1 Ответ

1 голос
/ 27 февраля 2020

Согласно Deque (в частности, стратегия # 5), теги <svg> требуют, чтобы атрибут role был установлен на img. Я не уверен на 100%, что это правильное решение, но добавление role="img" решило мою проблему. 

    <svg 
      aria-labelledby="imageLabel-10"
      class="..."
      role="img" <!-- this was the missing attribute -->
      viewBox="..."
    >
    ...
    </svg>
...