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

Question

我找遍了所有地方，但没有成功。我正在制作如下所示的 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 页上执行此操作）。还是我应该将描述中所有文字的完整描述放在顶部？

Answer 1

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

尝试将其更改为 role="graphics-document"（或者如果您想要更有趣的互动，则可能 role="application"），我认为您的运气会好得多。

Answer 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>

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

Making screen-readers read out <text> items in SVG graphics?

svg

accessibility

wai-aria

nvda