Better text in SVG announcements in screen readers (VoiceOver) - svg

Question

I have an SVG figure that represents a name card for a person:
<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 reads it like this:
Name, group
Name
End of, name, group
Joe Smith, group
Joe Smith
End of, Joe Smith, group
Age, group
Age
End of, Age, group
55, group
55
End of, 55, group
Occupation, group
Occupation
End of, Occupation, group
Astronaut, group
Astronaut
End of, Astronaut, group
It's very, very verbose. How do I modify this code to make VoiceOver read it like this?
Name
Joe Smith
Age
55
Occupation
Astronaut
I'm looking for a solution using SVG / ARIA. I know I can implement this using HTML and achieve better results in VoiceOver, but this is just a dummy example to illustrate the problem.

Answer 1

You can safely remove the <g> elements as they serve no real purpose for display (they are used for layering in an editor and as a possible point to apply transforms, styling etc.)
After doing that the element will read correctly.
I recommend using SVG OMG to optimise your SVGs, especially if they are large and complex graphics. You may still need to remove some <g> tags, you can safely do this just using a replace function on <g> and </g> (the hacky way!) or better yet use an XML reader / writer and do it properly!