SVG文本可访问性

Question

I have the following structure

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

How can I ensure the text inside the clipPath ("Scooby") gets seen by screen readers and only once ?

I know SVG text should be read by screen readers, but is that the still the case when it's inside a clipPath element? And what about use copies of it?

I'm using this structure in order to get some fancy effects (think stuff like this ) on the heading text (and ditch the .jpg image that's currently used).

Answer 1

Remove the SVG from your screenreader using aria-hidden and define the label for your h2 using 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

Add aria-hidden to suppress screen reading on specific elements, it'll read "Scooby" just once:

<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

The aria-label attribute is intended for use when text is not visible on screen

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

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

or alternatively, I believe most screen readers will use the <title> SVG element.

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

You also have the option of using other ARIA attributes, such as aria-labelledby .