Bezdepbonusu7Программирование: статьи и ответы
Меню

Вопрос

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

Автор вопроса: kamituelОтветов: 1

У меня есть фигура 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, но это всего лишь фиктивный пример, иллюстрирующий проблему.

svgaccessibilityvoiceoverscreen-readers

Ответы

Ответ 1 · Graham Ritchie

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

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

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

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы