К сожалению, с примером, который у вас есть, это будет очень трудно реализовать (не часть надписи, а общедоступность в целом из-за структуры документа).
Первое, что вам нужно сделать, это исправить DOM порядок SVG - первый узел, на котором вы приземлились, - «нет», что сбивает с толку, и исправить порядок DOM намного проще, чем пытаться управлять tabindex.
Следующее, что вам нужно показать что активация элемента (т. е. «да») приводит к загрузке большего количества опций.
Для этого я бы следовал соглашениям складного контента - этот пример аккордеона должен помочь вам понять, как использовать aria-expanded и aria-controls правильно. (но используйте его только для понимания этих концепций, это не правильное решение для вашей проблемы.)
Далее вам нужно подумать о том, чтобы дать пользователю знать, какие варианты были ему предоставлены. Самый простой способ сделать это - обернуть SVGs в <ul>, так как программа чтения с экрана сообщит им, сколько элементов можно выбрать (в расширенном разделе).
С этим помните, что вы должны посмотреть, как структурировано древовидное представление , поскольку это даст вам наиболее близкий пример того, как структурировать сложные вложенные структуры.
Также посмотрите на этот пример представления дерева файлового обозревателя , который похож на то, что при правильном вложении вам не нужно слишком беспокоиться о маркировке. (поскольку вы можете просто использовать свойство <title> вашего SVGs в качестве содержимого, если вы обнаружите, что простой текст не читается правильно).
Что вы заметите в приведенных выше примерах, так это то, что текст «родительского узла» фактически содержится в <li role="treeitem">, поэтому при выборе подэлемента он одновременно считывает и родительский элемент, и выбранный элемент. автоматически.
Попытка выполнить все вышеперечисленное с использованием только SVG приведет к многочисленным головным болям с обходными путями (т. е. вы можете использовать aria-labelledby с несколькими идентификаторами для дочерних элементов, чтобы добиться того, что вы первоначально задавался, но тогда у вас много проблем с удобством обслуживания), поэтому я бы порекомендовал попытаться скопировать структуру treeview и сохранить ваши SVG простыми.
Последнее преимущество метода treeview заключается в том, что пользователи будут знать, как управлять древовидной структурой (клавиши , стрелки и пробел для развертывания / свертывания), поэтому вам не нужно пытаться обучать их тому, какие элементы управления использовать.
Пример
Немного трудно читать, но, надеюсь, должен дать вам представление о том, как должна выглядеть ваша конечная структура. Я удалил много атрибутов позиционирования et c. чтобы было легче читать.
<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>