代码之家 › 专栏 › 技术社区 › dimitry_n

Safari VoiceOver SVG将`<SVG/>`中的标记作为单独的图像发布

voiceover accessibility safari svg html

dimitry_n · 技术社区 · 4 年前

我有一个 <svg />

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

马科斯莫哈韦10.14.6 Safari 13.0.5版

0 回复 | 直到 4 年前

dimitry_n 4 年前

According to Deque <svg> 标签需要 role 要设置为的属性 img role="img" 解决了我的问题。

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

推荐文章

GurpusMaximus · 如何使用Java PDFBox 2.0.8库创建可访问的PDF,该库也可以使用PAC 2工具进行验证?

6 年前

David Costa · 如何以编程方式在主屏幕之间滚动?

6 年前

Ian Boyd · 如何设置与TEdit控件关联的可访问名称?

6 年前

fhe · 在nsDialogs中处理键盘导航

6 年前

user1942362 · 如何在IOS上创建混合应用程序?

6 年前

Josh Pham · 屏幕阅读器读取移动应用程序上密码类型输入的“句号”或“星形”

7 年前

jcolton · 当文档大纲中的位置未知时,使用哪个标题级别?

7 年前

Stu Care · Javascript/jQuery:如何基于tab-press识别所选项目?

7 年前

Binary Baba · 双击不会在对讲模式下单击父视图

7 年前

Vecta · 具有垂直和水平标题的可访问表格

7 年前