屏幕阅读器(旁白)中 SVG 公告中的文本更好

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>

画外音是这样读的：

名称、组

名字

结束、名称、组

乔·史密斯，组

乔·史密斯

结束， 乔·史密斯， 组

年龄组

年龄

结束， 年龄， 组

55、组

55

结束， 55， 组

职业，组

职业

结束， 职业， 组

宇航员，组

宇航员

结束， 宇航员， 组

非常非常冗长。如何修改此代码以使旁白像这样阅读？

名字

乔·史密斯

年龄

55

职业

宇航员

我正在寻找使用 SVG/ARIA 的解决方案。我知道我可以使用 HTML 实现这一点并在 VoiceOver 中取得更好的结果，但这只是一个说明问题的虚拟示例。

Answer 1

您可以安全地删除<g>元素，因为它们没有真正的显示用途(它们用于编辑器中的分层，并作为应用转换，样式等的可能点(

完成此操作后，元素将正确读取。

我建议使用 SVG OMG 来优化您的 SVG，尤其是当它们是大型且复杂的图形时。您可能仍然需要删除一些<g>标签，您只需在<g>和</g>上使用替换功能即可安全地执行此操作(黑客方式！(，或者最好使用 XML 阅读器/编写器并正确执行此操作！