Safari VoiceOver SVG 将 `<svg />` 中的标签宣布为单独的图像答案

【问题标题】：Safari VoiceOver SVG announces tags inside `<svg />` as separate imagesSafari VoiceOver SVG 将 `<svg />` 中的标签宣布为单独的图像
【发布时间】：2020-03-05 00:36:17
【问题描述】：

我有一个<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

【问题讨论】：

标签： html svg safari accessibility voiceover

【解决方案1】：

According to Deque（特别是策略#5）、<svg> 标签需要将role 属性设置为img。我不是 100% 确定这是正确的解决方案，但添加 role="img" 确实解决了我的问题。

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

【讨论】：