Sadly with the example you have this is going to be very difficult to implement (not the labelling part but accessibility in general due to the document structure).
First thing you need to do is fix the DOM order of the SVGs - the first node you land on is 'no' which is confusing and fixing the DOM order is a lot easier than trying to manage tabindex
.
The next thing is that you need to show that activating an item (i.e. 'yes') has an effect of loading more options.
For this I would follow conventions of collapsible content - this accordion example should help you understand how to use aria-expanded
and aria-controls
correctly. (but only use it for understanding those concepts, it isn't the right solution for your problem.)
Next you need to consider letting a user know what options have now been presented to them. The simplest way to do this is to wrap the SVGs
in an <ul>
as then a screen reader will let them know how many items there are to choose from (within the expanded section).
With that in mind you should look into how a treeview is structured as that will give you the closest example of how to structure complex nested structures.
Also look at this file explorer tree view example which is similar to see that with correct nesting you do not need to worry about labelling too much. (as you can just use the <title>
property of your SVGs
as the content if you find the plain text is not read out correctly).
What you will notice in the above examples is that the 'parent node' text is actually contained within the <li role="treeitem">
so that when you select a sub-item it reads both the parent and the selected item out together automatically.
Trying to do all of the above with just the SVGs will cause you numerous headaches with workarounds (i.e. you could use aria-labelledby
with multiple IDs on child items to achieve what you originally asked but then you have lots of maintainability issues) so I would recommend looking at trying to copy a treeview
structure and keep your SVGs simple.
The final advantage of the treeview
method is that users will be familiar with how to control the treeview (arrow keys and space to expand / collapse) so you don't need to try and educate them as to what controls to use.
Example
A bit hard to read but hopefully should give you an idea of what your end structure should look like. I have removed a lot of the positioning attributes etc. to try and make it easier to read.
<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>