Текстовая доступность SVG

Question

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

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

Как я могу гарантировать, что text внутри clipPath («Скуби») будет виден программами чтения с экрана и только один раз ?

Я знаю, что SVG text должен читаться программами чтения с экрана, но это все еще тот случай , когда он находится внутри элемента clipPath?А что насчет use его копий?

Я использую эту структуру для того, чтобы получить некоторые причудливые эффекты (например, такие, как эта ) в тексте заголовка (и исключить.JPG изображение, которое используется в настоящее время).

Answer 1

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

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

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

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

Answer 2

Удалите 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='100%' height='100%'/>
      <path/>
    </g>

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

Answer 3

Добавить aria-hidden к подавить показание экрана на определенных элементах, он будет читать «Скуби» только один раз:

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