Svg 如何获取NVDA和类似文件以读取<；的aria标签和内容；外来物品>；？

这是我在StackOverflow上的第一篇文章，因此对于任何错误，我深表歉意。 我有一个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>

…我想把这个也念出来。

当我对每个节点进行tab时，Chrome只读取foreignobject中的文本，Edge Chrome只读取g中的aria标签文本。 我曾尝试在g和foreignobject中使用标题、标签等，但我无法让任何一个浏览器同时读取两个文本片段。如果可能的话，有人能建议我如何做到这一点吗？ 我不想做一些粗制滥造的事情，比如输入额外的文本，然后用CSS隐藏它。

---

感谢英国，我一直在做类似的事情，尽管我没有任何打开/关闭隐藏/显示行为

这是一个非常没有解决的问题，所以我对在这一领域所做的任何工作都很好奇，我希望您能进一步通信！一定要检查。我认为这是任何适当解决方案的一部分。也值得一看

我已经尝试了很多方法，也解决了SVG和外来对象的问题，并使用选项卡进行导航。甚至实现了两种不同的机制来选择分支

棘手的事情是选择分支。有一个名为的属性，它将一个或多个“destination”id作为一个值，但是它的支持非常差，并且没有推荐的习惯用法来进行选择。（但是，可以让它与javascript一起工作）

我的一次尝试是使用javaScript将框中的内容复制到附加到元素上的aria标签上，标签上有

tabindex=0

。这很好，但没有提供任何“可浏览”的内容。同样，宣布分支机构是一项挑战

---

如果您希望foreignObject中的标记可以使用诸如标题之类的语义提示进行浏览，那么您可能必须使用

role=document

，许多社区成员无疑会警告您，因为这很棘手。我已经能够让

role=document

在HTML中正常工作，但还没有将其与SVG集成。我还不知道它是否能很好地发挥作用。

遗憾的是，在您的示例中，这将很难实现（不是标签部分，而是由于文档结构的缘故，通常的可访问性）

您需要做的第一件事是修复SVG的DOM顺序-您到达的第一个节点是“否”，这很容易混淆，修复DOM顺序比尝试管理

tabindex

容易得多

下一件事是，您需要显示激活一个项目（即“是”）会产生加载更多选项的效果

为此，我将遵循可折叠内容的约定-这将帮助您了解如何正确使用

aria expanded

和

aria控件。（但仅在理解这些概念时使用它，它不是解决问题的正确方法。）

接下来，你需要考虑让用户知道现在已经向他们呈现了什么选项。最简单的方法是将
svg
包装在
中，然后屏幕阅读器会让他们知道有多少项可供选择（在展开的部分中）

考虑到这一点，您应该研究as如何为您提供最接近的示例，说明如何构造复杂的嵌套结构

另外，看看哪一个与正确的嵌套相似，您不需要担心标签太多。（如果发现纯文本没有正确读取，您可以使用
SVG
的
属性作为内容）

在上述示例中，您会注意到“父节点”文本实际上包含在
中，因此当您选择子项时，它会自动将父节点和所选项一起读取

尝试仅使用SVG执行上述所有操作将导致解决方案方面的许多问题（即，您可以在子项上使用多个ID来实现最初要求的功能，但随后会遇到许多可维护性问题）因此，我建议您尝试复制
treeview
结构，并保持SVG的简单

treeview
方法的最后一个优点是，用户将熟悉如何控制treeview（箭头键和展开/折叠的空间），因此您无需尝试和教育他们使用哪些控件

例子
读起来有点难，但希望能让你了解你的终端结构应该是什么样子。我已经删除了很多定位属性等，试图使它更容易阅读

<h3 id="tree_lbl">
  Decision Tree
</h3>
<ul role="tree" aria-labelledby="tree_lbl">
  <li role="treeitem" aria-expanded="false">
      <g class="node">
        <foreignObject tabindex="0" focusable="true" class="nodestyle">Is this a decision tree?</foreignObject>
      </g>
    <ul role="group">
      <li role="treeitem" aria-expanded="false">
        <g class="node">
          <foreignObject tabindex="0" focusable="true" class="nodestyle">Yes</foreignObject>
        </g>
        <ul role="group">
          <li role="treeitem">
            <g class="node"><foreignObject tabindex="0" focusable="true" class="nodestyle">A</foreignObject></g>
          </li>
          <li role="treeitem">
            <g class="node">
              <foreignObject tabindex="0" focusable="true" class="nodestyle">B</foreignObject>
            </g>
          </li>
        </ul>
      </li>
      <li role="treeitem" aria-expanded="false">
        <span>
          <g class="node">
              <foreignObject tabindex="0" focusable="true" class="nodestyle">No</foreignObject></g>
        </span>
        <ul role="group">
          <li role="treeitem" class="doc">
            <g class="node">
              <foreignObject tabindex="0" focusable="true" class="nodestyle">A1</foreignObject>
            </g>
          </li>
          <li role="treeitem" class="doc">
            <g class="node">
              <foreignObject tabindex="0" focusable="true" class="nodestyle">B1</foreignObject>
            </g>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  </ul>


决策树


这是一个决策树吗？


对


A.


B




不


A1


地下一层






您想要实现什么目标？i、 e.为什么包含文本的节点具有屏幕阅读器的附加信息。我这样问是因为可能有更好的方法来构造SVG。哦，看看
aria labelledby
，这样你就可以随心所欲了