svg - 我怎样才能得到 NVDA 和类似读出 的 aria-label 和内容？

Question

我有一个 SVG 树形图形，我想让 NVDA 和类似的用户可以访问它。

SVG图形中的每个节点编码如下:

<g class="node" >
<foreignObject tabindex="0" focusable="true" aria-label="I want this read by screen readers such as NVDA..." class="nodestyle">...and I'd like this read out as well.</foreignObject>
</g>

当我切换到每个节点时，Chrome 只读出 foreignobject 中的文本，而 Edge Chromium 只读出 g 中的 aria-label 文本。我试过在 g 和 foreignobject 中使用标题、标签等，但我无法让任何一个浏览器读出两个文本。如果可能的话，任何人都可以建议我如何实现这一目标吗？

我不想做一些棘手的事情，比如输入额外的文本然后用 CSS 隐藏它。

Answer 1

我一直在做一些非常相似的事情，尽管我没有任何打开/关闭隐藏/显示行为。

这在很大程度上不是一个已解决的问题，所以我很好奇在这个领域所做的任何工作，我希望您能收到进一步的信件!检查this article .我认为这是任何适当解决方案的一部分。 This one也值得一看。

我尝试了很多东西，也选择了带有外来对象的 SVG，并使用 Tab 键进行导航。甚至实现了几种不同的机制来选择分支。

棘手的事情是选择分支。有一个名为 aria-flowto 的属性它以一个或多个“目的地”id 作为一个值，但它的支持很差，并且没有推荐的习语用于在其中进行选择。 (但是，它可以与 javascript 一起使用)。

我的一个尝试是使用 javaScript 将方框的内容复制到附在元素上的 aria-label 中，该元素上有 tabindex=0。这工作得很好，但没有提供任何“可浏览”内容的功能。同样，宣布分支机构是一项挑战。

如果您希望使用标题等语义可供浏览 foreignObject 中的标记，您可能必须使用 role=document，许多 a11y 社区成员无疑会警告您不要这样做因为这很棘手。我已经能够使 role=document 在 HTML 中正常工作，但尚未将其与 SVG 集成。我还不知道它是否能很好地与 WAI-ARIA Graphics Module 配合使用角色。