Help getting NVDA to read descriptions of elements in SVGs


Paddy Uglow <paddy.uglow@...>
 

Hi,

This is my first post here – I develop learning resources for a university and we want to make them NVDA-friendly.

 

I’m  currently working on a decision tree, which can be seen here:

https://www.creativemedia.org.uk/interactive-trees/filtration-tryout.html

 

I want to add an invisible description to each node on the tree to help NVDA users navigate.

Below is part of the SVG (Scalable Vector Graphic) from the page: I’ve used the aria-label tag to explain where the node fits in the tree, but my NVDA doesn’t read it out. I’ve also tried title, alt and label in various places but they don’t get read out either.

Can anyone give me any hints or solutions? All I can think of is to use a hidden <div> which I don’t think is an ideal solution.

Thank you

  • Paddy

 

<svg width="950" height="800">

<g class="node" transform="translate(697.5,95)">

<foreignObject tabindex="0" focusable="true" height="48" aria-label="Option for choice, 'An example of a decision tree.'" width="110" x="-55" class="nodestyle">Keep liquid</foreignObject>

</g>

</svg>

Join nvda@nvda.groups.io to automatically receive all group messages.