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

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


svg accessibility voiceover screen-readers
person kamituel    schedule 13.02.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

person Graham Ritchie    schedule 14.02.2020
comment
Я только что удалил все три <g> и протестировал в Safari + VO, и группы все еще объявляются. Так что это не решение, к сожалению. Кроме того, для более сложного SVG мне могут понадобиться <g> такие вещи, как позиционирование. - person kamituel; 14.02.2020
comment
<g> диктует группы, очистите кеш, так как SVG определенно не сможет объявить группы, если вы удалите <g> и закроете </g>. Элементы <g> не определяют позиционирование, то есть x=5 y=85 частей каждого текстового элемента. (вы можете использовать <g> для таких вещей, как стиль и вращение) - person Graham Ritchie; 14.02.2020
comment
Я могу предложить одну вещь (но я не пробовал, поскольку я всегда удаляю элементы <g> и стиль с помощью классов) — это использование <title> и <desc> — не уверен, что это переопределяет текст в SVG. Последнее, однако, состоит в том, чтобы использовать aria-labelledby и создать метку, содержащую информацию, которая также может переопределить. - person Graham Ritchie; 14.02.2020
comment
Если вы посмотрите, как VO объявляет об этом SVG, вы увидите, что он объявляет группу для каждого <text>, а не для каждого <g>. Это не проблема кеша (и я все равно использовал локальный файл .html для тестирования). Просто кажется, что VO вообще не анонсирует <g>, поэтому их удаление не оказало никакого влияния. - person kamituel; 14.02.2020
comment
Я часто использую <g>' для позиционирования. Как 2_. Это позволяет мне использовать другие координаты в <g>. В любом случае, согласно предыдущему комментарию, я не думаю, что <g> все равно объявляются. - person kamituel; 14.02.2020
comment
попробуйте aria-labelledby, я никогда не сталкивался с проблемой с SVG, которые я создал, где он объявляет <text> как группы, интересно, есть ли настройка многословия где-то в VO, которую вы полностью включили. Я попробую и протестировать позже для вас. - person Graham Ritchie; 14.02.2020
comment
последняя мысль - определили ли вы свой SVG с двумя основными параметрами <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 376 92">, поскольку это может быть проблемой (опять же, я всегда делаю это, поэтому не уверен, имеет ли значение наличие xmlns для информирования программы чтения с экрана, как интерпретировать информацию? Очевидно, верно HTML5 без него, но просто пытаюсь понять, почему вы увидите другой опыт, чем я) - person Graham Ritchie; 14.02.2020
comment
Хорошее место, но, к сожалению, работало одинаково с xmlns и без <g>. - person kamituel; 14.02.2020