Улучшенный текст в объявлениях SVG в программах чтения с экрана (VoiceOver)

Question

У меня есть фигура SVG, которая представляет карточку имени человека:

  <svg
    viewBox="0 0 300 100"
    style="border: 1px solid black;"
  >
    <g>
      <text x="5" y="25">Name</text>
      <text x="120" y="25">Joe Smith</text>
    </g>

    <g>
      <text x="5" y="55">Age</text>
      <text x="120" y="55">55</text>
    </g>

    <g>
        <text x="5" y="85">Occupation</text>
        <text x="120" y="85">Astronaut</text>
      </g>
  </svg>

VoiceOver читает это так:

Имя, группа

Имя

Конец, имя, группа

Джо Смит, группа

Джо Смит

Конец, Джо Смит, группа

Возраст, группа

Возраст

Конец, Возраст, группа

55, группа

55

Конец, 55, группа

Профессия, группа

Профессия

Конец, Профессия, группа

Астронавт, группа

Астронавт

Конец, астронавт, группа

Это очень, очень многословно. Как изменить этот код, чтобы VoiceOver читал его следующим образом?

Имя

Джо Смит

Возраст

55

Профессия

Астронавт

Я ищу решение с использованием SVG / ARIA. Я знаю, что могу реализовать это с помощью HTML и добиться лучших результатов в VoiceOver, но это всего лишь фиктивный пример для иллюстрации проблемы.

Answer 1

Вы можете безопасно удалить элементы <g>, так как они не служат реальной цели для отображения (они используются для наложения в редакторе и в качестве возможной точки для применения преобразований, стиля * et c.)

После этого элемент будет правильно читать.

Я рекомендую использовать SVG OMG для оптимизации ваших SVG, особенно если они имеют большую и сложную графику. Вам все еще может понадобиться удалить некоторые теги <g>, вы можете безопасно сделать это, просто используя функцию замены в <g> и </g> (хакерский путь!) Или, что еще лучше, использовать XML reader / writer и делать это правильно!