SVG text accessibility - 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.