SVG 文本可访问性

Question

我有以下结构

<h2>
  <svg viewBox='-5 -40 100 50'>
    <!-- some filters that get applied on the elements below -->
    
    <clipPath id='c'>
      <text id='t'>Scooby</text>
    </clipPath>
    
    <g clip-path='url(#c)'>
      <rect x='-5' y='-40' width='100%' height='100%'/>
      <path/>
    </g>
    
    <use xlink:href='#t'/>
    <use xlink:href='#t'/>
  </svg>
</h2>

我如何确保 text内 clipPath (“史酷比”)被屏幕阅读器看到并且只有一次？

我知道 SVG text应该由屏幕阅读器读取，但是当它在 clipPath 中时仍然如此元素？那么 use副本吗？

我使用这种结构是为了在标题文本上获得一些奇特的效果(想想 stuff like this )(并丢弃当前使用的 .jpg 图像)。

Answer 1

使用 aria-hidden 从屏幕阅读器中删除 SVG并为您的 h2 定义标签使用 aria-labelledby .

<h2 aria-labelledby="t">
  <svg viewBox='-5 -40 100 50' aria-hidden="true">
    <!-- some filters that get applied on the elements below -->

    <clipPath id='c'>
      <text id='t'>Scooby</text>
    </clipPath>

    <g clip-path='url(#c)'>
      <rect x='-5' y='-40' width='100%' height='100%'/>
      <path/>
    </g>

    <use xlink:href='#t'/>
    <use xlink:href='#t'/>
  </svg>
</h2>