让屏幕阅读器读出 SVG 图形中的 <text> 项？答案

【问题标题】：Making screen-readers read out <text> items in SVG graphics?让屏幕阅读器读出 SVG 图形中的 <text> 项？
【发布时间】：2022-01-27 00:12:40
【问题描述】：

我到处搜索，但没有任何成功。我正在制作如下所示的 SVG，以使其具有可扩展性，并帮助阅读障碍者突出显示文本并使用 Read Out Loud 之类的插件：

https://www.ole.bris.ac.uk/bbcswebdav/institution/TEL/TEL%20guides/Published%20TEL%20guides/Replay/record-now-instructions-web.svg

但我无法让我的 NVDA 副本在我通过标签浏览它们时读出标签索引字段。我已经在各种事情上尝试过字段和 aria-label...

有什么简单的我可以更改的，以便 NVDA（和类似的屏幕阅读器）在我通过标签时读出文本（NVDA 在 HTML 页面上执行此操作）。还是应该将描述中所有文本的完整描述放在顶部？

【问题讨论】：

标签： svg accessibility wai-aria nvda

【解决方案1】：

我注意到您的 svg 根目录中有 role="img"。这很无聊，因为它告诉可访问性 API 它只是一个元素，其可访问名称始终为 aria-labelledby="svgTitle svgDesc"

尝试将其更改为 role="graphics-document"（或者如果您想要更高级的交互，也可以更改为 role="application"），我认为您会有更多的运气。

【讨论】：

是的！是的！是的！（当哈利遇见莎莉时的梅格瑞恩）！非常感谢！ :-) 我多年来一直在与这个作斗争，我怀疑必须“只是”有一个我可以改变以使其工作的东西。但我不知道那是什么东西或要寻找什么。一个丰富的可访问指南的世界等待着......！再次感谢。我想在办公室跳个小舞！
只是好奇，为什么graphics-document (w3.org/TR/graphics-aria-1.0/#graphics-document) 没有在w3.org/TR/wai-aria/#role_definitions 中列出role 的所有其他可能值？
@slugolicious 我认为这只是历史的偶然。 Graphics-aria 是与 ARIA 的其余部分分开开发的。但是，我认为如果未来版本的 wai-aria 保持这种区别，那将是一个错误。规范的分离没有解决一些重要的差距。（特别是数据视图的“可操作性”与“浏览”的概念）。它们应该被合并到 IMO。

【解决方案2】：

另一个选项是从<svg> 元素中删除role 属性。这听起来违反直觉，但它应该使任何<text> 元素都可以访问。

例如，请参阅此 SitePoint 文章中的技巧 5，该文章有很好的背景知识和其他有用的技巧，可以让 SVG 在不同的用例中更易于访问： Tips for Creating Accessible SVG

来自上述文章：

<svg version="1.1" width="300" height="200" aria-labelledby="title desc">
<title id="title">Green rectangle</title>
<desc id="desc">A light green rectangle with rounded corners and a dark green border.</desc>
<rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" />
<text x="35" y="30" font-size="1em" text-anchor="middle" fill="#000000">Website</text>
</svg>

【讨论】：