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（“ Scooby”）中的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>

Answer 2

将aria-hidden添加到suppress屏幕上有关特定元素的屏幕上，它将仅读取一次“ 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属性旨在在屏幕上看不到文本时使用

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。

SVG文本可访问性

3 个答案: