Menu
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).
397
Accessibility – Markup can be added to the SVGs directly so more information can be added within the image itself – which is helpful for people using assistive technology devices such as screen readers.
Add aria-describedby for a better accessibility First, you'll have to add a <title> to your code. The <title> should always come right after the opening <svg> and before the <path> . Now you'll have to add aria-describedby to the <svg> . You can read about this aria-attribute on the page about aria-describedby.
An <svg> element with an image or graphics role must have alternative text.
SVG online (inline) # The best support for SVGs is to display them inline. You must use aria-labelledby as the first choice by referencing the "title" and the "desc" (avoid aria-describedby for the "desc", still bad support) to ensure maximum support.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
