CODEWITHSUNDEEP
svgtextaccessibilityscreen-readers
Ana
Ana

Reputation: 37178

SVG text accessibility

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

Upvotes: 7

Views: 935

Answers (3)

Adam
Adam

Reputation: 18855

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>

Upvotes: 6

Paul LeBeau
Paul LeBeau

Reputation: 101938

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.

Upvotes: 0

Robert Monfera
Robert Monfera

Reputation: 2147

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>

Upvotes: 0

Related Questions