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它的副本呢？

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

Answer 1

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

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

Answer 2

添加aria-hidden以抑制特定元素的屏幕阅读，它只会读取“Scooby”一次：

<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 aria-hidden="true" xlink:href='#t'/>
    <use aria-hidden="true" xlink:href='#t'/>
  </svg>
</h2>

Answer 3

aria-label属性适用于屏幕aria-label不到文本的情况

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

<h2 aria-label="Scooby">
  <svg> ... </svg>
<h2>

或者，我相信大多数屏幕阅读器都会使用<title> SVG元素。

<h2>
  <svg>
    <title>Scooby logo</title>
    ...
  </svg>
<h2>

您还可以选择使用其他ARIA属性，例如aria-labelledby 。