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>

我怎样才能确保屏幕阅读器只能看到("Scooby")text内部一次？clipPath

我知道SVG text应该由屏幕阅读器阅读,但是当它在一个元素内时仍然是这样clipPath吗？use它的副本怎么样？

我正在使用这种结构,以便在标题文本上获得一些奇特的效果(想想这样的东西)(并抛弃当前使用的.jpg图像).

Answer 1

使用从屏幕阅读器中删除 SVGaria-hidden并为您的h2using定义标签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>