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>

如何确保 clipPath ("Scooby") 中的 text 被屏幕阅读器 且仅显示一次 ？

我知道 SVG text 应该被屏幕阅读器阅读，但是 当它位于 clipPath 元素内时，情况是否仍然如此？那么 use 份呢？

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

Answer 1

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

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。

Answer 3

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

SVG 文本可访问性

SVG text accessibility

svg

text

accessibility

screen-readers