Доступность текста SVG

У меня есть следующая структура

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

Всего 3 ответа


Удалите SVG с вашего экрана, используя aria-hidden и определите метку для своего h2 используя 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=颼%' height=颼%'/>
      <path/>
    </g>

    <use xlink:href='#t'/>
    <use xlink:href='#t'/>
  </svg>
</h2>

Добавьте aria-hidden для подавления чтения экрана по определенным элементам, он будет читать «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=颼%' height=颼%'/>
      <path/>
    </g>

    <use aria-hidden="true" xlink:href='#t'/>
    <use aria-hidden="true" xlink:href='#t'/>
  </svg>
</h2>

Атрибут 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>

или, наоборот, я считаю, что большинство читателей экрана будут использовать элемент SVG <title> .

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

У вас также есть возможность использовать другие атрибуты ARIA, такие как aria-labelledby .